83. 资源css与js优化处理

龺龸龵龲龱龮龫龩龦龤龢 drupal 龊龉龈龄龃龁齽齺齸齵龢齳齯齮齪齩齥龫龩齤齠齜龫龩齛齚齗齖齔齑龢齯龊齏齌齗龃龁齋齚齌齈齮齄齃龢齁鼽齋齚鼼鼻齄鼽齋齚龢齳鼹鼸鼷鼴龸鼰鼭鼫齑龩鼪鼦龢鼤鼣鼠鼝龃龁鼜鼛鼗鼔齺齸齵龢鼒鼏鼋鼇鼃鼂鼛鼃鼂鼁鼃 BOM 龢龉齜黹黶龃龁黳黯黭龢齽齺鼫齗黫黧黤黣黡齮龃龁黝黜鼫黙默黕黑黍 asset.resolver

黃黁鼜鼛齗龢黀麿麻麺黝龃龁麹麷齽齺麶

Css 麲齽齺鼫黍

鼝龱龮 css 齋齚麲鼜鼛齽齺齸齵

默黕黑黍 asset.css.collection_optimizer

麟黍 Drupal\Core\Asset\CssCollectionOptimizer

麓默黕麒麑 css 麲麎麌鼫鼃齽齺鼫鼃麉麅鼫麁鼽默黕鹿鹽龢鹹齑齋麶

黫黧鹶鹳黍

\Drupal::service('asset.css.collection_optimizer')->optimize($css);

鹠鼦 $css 黡齄鼽鼦麌龢鹞黑龺龃龁鹝鹜龢鹞鹙龺鹗鹔鼦麌龢麓鼦麌鹓鹏鹋齠龢鹈龮齗鹈龫龩麶

麓鹶鹄鹂鹁齄鼽鼦麌龢鹞黑黡鸿 0 龈鸹鸸鸶齗鼦鸲龢鸰鸮龫龩齤齠龢鸫鸩鹈鸫鹈龫龩龢鹞鹙黡齄鼽鹗鹔鼦麌麶

齮鹂鹁齗鼦麌黁鸧鼽鸤鸠鸰鸮鸟齄鼽 css 龃龁齋齚龢龊龤黡齄鼽鸞鸚 css 龢鸙鸘鸚齪龊齏齌齗 css 齋齚龢鸙黡齄鼽龊齏齌龃龁麌鸔鸐齏齌齗 css 齋齚龢齏齌黡鸍鸊龫龩齤齠齯鸈鸅龊齌齈齗 css 齋齚鸁麎鸀齄鼽麌龢齯麌鸘齁鼽 css 齋齚鼗鼔齈齌齈鸀齄鼽齋齚黁龢齮龱龮鷼龈鼣鷻鼜鼛齄鼪齑龩鷸龊龢龵龲龦龤龢麹鷴黡鸔鸐齏齌齗龃龁龢鷰鷭鸤鸠鼦麌黁鷪鷨齮 preprocessed 鹞龢鷥鹙龺 true

齏齌鷣鷴鷡龃龁麉麅鼫鷟鷨鸀齋齚鷞鷚黁龢鷞鷚齮龉齑鷗鷖鷟鷨鸟鷡齏齌 css 齋齚麲鸀齏齌鷣鷴齋齚齗鷓鷒黍

\Drupal::state()->get('drupal_css_cache_files')

黡齄鼽鼦麌龢鹞黑龺鷈鷇鹙龢鷆龊齏齌龃龁麌鸘龁 css 齋齚鷄鷂鷁鼻鼦麌鸔鸐 sha256 鶸鶴鶳鸀龢鹞鹙龺鷡齏齌鶳鸀齗齋齚齗 uri 鷄鷂龢麓鷄鷂鷆龃龁麉麅鼫鹂鹁龢龉鶲 public:// 鶨龈鶦龢鹹龃龁麉麅鼫麶

鸞鸚齋齚齪鷪鷡齏齌龢鸘鸚齋齚鹓龊齏齌鶢龈龄齏齌鶡鷖鼣鶝齏齌龢黡鶜龊齏齌鶙鶕鶑鶏黁 css 齋齚鹗鹔 preprocess 鼃鹝鹜黡鶜鶍鹠鼦黭鶋鶇龢龈龄齏齌鶡鷖齗鹈鶃鷄鷂黡黍

/admin/config/development/performance

鶀齠鹶鹳龺黍

\Drupal::config ('system.performance')->get('css.preprocess');

css 齏齌鵹麒麑鵶麎麌龢鷻鶋鼤齄鼽麌鸘齗 css 鶝龤齏齌龢麎麌鵵鵳鷆 css 麎麌鼫鼜鼛龢鹹齑麶

W3C css 鵫鵧黁鸍鶑龸 @import 齗鵠黧鵫鵞龢鵝鵚鹓齮黀鸮鵙齗鵘麷鵫鵞鵔鵹龢鵐鵏麓默黕齮齏齌鹈鵋龸鸈鵉齸齵龢鹹黍

https://www.w3.org/TR/REC-CSS2/cascade.html#at-import

Css 麲麎麌鼫 grouper

默黕 id asset.css.collection_grouper

麟黍 Drupal\Core\Asset\CssCollectionGrouper

齮鷟鴷 css 麲鸘龫龩齤齠齪鼼齗齖齔齑龢齯 css 麲鸘 css 鸁麎鼻齁鼽鴵鴳麌 龢黫黧鹶鹳黍

\Drupal::service('asset.css.collection_grouper')->group($css_assets);

鹠鼦 $css_assets 黡齄鼽鼦麌龢鹞黑龺 css 鹝鹜龢鹞鹙龺鹗鹔鼦麌龢鹂鹁齄鼽鼦麌龢鹞黑黡鸿 0 龈鸹鸸鸶齗鼦鸲龢齳鸰鸮鴵鴳麌齗黳鴲黙齳鴯麺齗麌黡鸍龊齏齌龃龁麌龢鴫鶕鶑鶏鹗鹔鴯龮齗 group 黡齪鼤齗鴨鴤黃龢鼤齄鼽麌鸘齗 css 齄鶑黡鴡黤鼦麌黁鸈鸅齗 css 龢鶢鷟鴞齤齠齪鼼龢鸧鼽麌鴝鼴齄鼽 css 鼻鴙龢鶢麌鸘 css 鼻鴙齗龉齑鴗鴓黡鴑鴎鸈鼤齗黍

preprocess type group media browsers

鷻鶋齳鴍鴗鴓鸈鼤鶝龤鷡齏齌龢麹鷴鹗鹔鹙 preprocess false 鸙鴊 type external 龢鷰鷭麓 css 齯鴆鼻齄麌龢鶢麌鸘鷻鶋鵝齄鼽鼻鴙

鹂鹁齗麌鼦麌黙 $groups[$i] 黃黁龢鶋麹齑鹞黑黍

Items 黍鹙龺齄鼽鼦麌龢鷟鷨鼻鴙齗鹗鹔鼦麌

media

browsers

preprocess

type

group

鹈鳿鼽鹞黑齗鹙鳼鴆鹗鹔鼦麌龢鸈鼤麌鸘齗 css 龃龁鵝鳹齗齳鴍鴗鴓黡鸈鼤齗龢

齮鸰黯黁鳶鷪鳳鸀 'basename' 鹗鹔龢齳齮鵙鸤鳰鳭黁黧鸀龢齪鵚齵鷪

齮麓默黕黁龊龉鳳麅鳪鵹齗鳩鳦黙 drupal8.5 黃黁鳡鶋鳠鴞 css 鳝鼗鹗鹔 minified 麶麹鷴鳠鴞鷰鷭齪鵉麓鳛黤麌鴗鴓鴯

css 齽齺鼫 optimizer

黧鳘鳝鼗齽齺鵙鼽 css 齋齚龢鳖鳒鼋鼇鼃鼂鼁鼃鳏鼛龢 BOM 龢鳍鳏 @import 龢龉 utf8 鳉麅鸘鳈

默黕黍 asset.css.optimizer

麟黍 Drupal\Core\Asset\CssOptimizer

黫黧麹齑黍

\Drupal::service('asset.css.optimizer')->optimize($css_asset);

鹠鼦 $css_asset 黡鸔鸐鸘鸚齸齵齗鹗鹔鼦麌龢鷥黁 data 鹞鷟鷨龸齋齚鹝鹜黙龊龉黡鳇鹝鹜龢鳃龊龉黡鸈鼝鳘鷞鷚鲿鳪鲾齗鹝鹜龢鵏鼣鲻鵹鲷鶲 / 鶨黃龢龊齮鲵鲳鼫黁鲲鼛龉齑鸰黯鳰鳭麓默黕齗鳉麅黍

$css_asset = ['type' => 'file',

'preprocess' => true,

'data' => 'core/themes/bartik/css/components/form.css'

];

$data = \Drupal::service('asset.css.optimizer')->optimize($css_asset);

print_r($data);

die;

龃龁麉麅鼫 dumper

黧鳘齯齄鼽麌鸘齏齌齽齺鹈齗 css js 龃龁鷟鷨鸀齄鼽齋齚黁龢齈鹂鹁齋齚 uri

默黕黍 asset.css.dumper

麟黍 Drupal\Core\Asset\AssetDumper

黫黧鹶鹳黍

$uri = \Drupal::service('asset.css.dumper')->dump($data, $file_extension);

鹠鼦 $data 黡麑鷟鷨齗龃龁鼦鲨龢 $file_extension 黡麑鷟鷨齗龃龁麟鲥龢 css 鸙鴊 js 龢鸘鸚鵠黧鵝鵋鲣鳪鲾鴫齋齚鲡鲟黑

麓默黕鲜黧鳇鲙鲕鼫鶲 public:// 鶨龢鶇鳘鳇鲙鲕鼫鲑鹹黀鷞鲍鲊鲆鲂 Drupal8 龁黯麎黜鵔 php Streams 鼃鱾鱺齋齚鼃鱸鶋齋齚鱷麿麻龢鶲 public:// 鶨齗鱳鱱鷗鷖龺黍 sites/default/files/

齋齚黑鲜黧 sha256 Base64 黳黯龢麹齑鱫鱧黍

$filename = $file_extension . '_' . Crypt::hashBase64($data) . '.' . $file_extension;

麹鷴 php 鷨齮 zlib 鲡鲟龢鶢龉齑鶡鷖龺 true

\Drupal::config('system.performance')->get($file_extension . '.gzip')

鷰鷭鼠鷪鱦鱥鳝鼗齋齚龢齮鼰鼭鼫鳠鴞鼣鼜齄鱢龵龲鴡鳉龦龤龢鳶龊龉鵠黧鶡鷖鷞鷚鸙鶡鷖齋齚鶇鱡麓鼛龺麶

齋齚鱟鵳鲑鹹黀鷞鲍齋齚鷞鷚鸈鶇麿麻麶

麓默黕鹂鹁齋齚齗 uri 龢麟鱝麹齑黍

public://css/ css_mMHZVBWrcsPaqRLbvud1u1JSon5n08FZbS-IBt37v0Q.css

齮鱁鰿龱龮鰽齳鰼鲜黧鳇鹿鰹齗 uri 齯鷡鳍鳏龺默黕鼫鰶鼝鹝鹜龢麹黍

/sites/default/files/css/ css_mMHZVBWrcsPaqRLbvud1u1JSon5n08FZbS-IBt37v0Q.css

js 麲齽齺鼫黍

黧鳘鼝龱龮龫龩齗齁鼽 js 齋齚鼜鼛齽齺

默黕黑黍 asset.js.collection_optimizer

麟黍 Drupal\Core\Asset\JsCollectionOptimizer

css 麲齽齺鼫鰲鼤鼔鰰龢齪鰮齁麺龢鸈鶇鼦鲨鷡鰭鷨齮麹齑鷗鷖黍

\Drupal::state()->get('system.js_cache_files');

js 麲麎麌鼫黍

默黕黑黍 asset.js.collection_grouper

麟黍 Drupal\Core\Asset\JsCollectionGrouper

css 齗麎麌鼫鰫鰨鸈鼤龢鰧黡齮鷟鴷麲鸘龃龁龫龩齤齠齪鼼齗齖齔齑龢齯龃龁鸁麎鼻齁鼽鴵鴳麌龢黫黧麹齑黍

\Drupal::service(' asset.js.collection_grouper ')->group($js_assets);

鰥齄鰣鰠鰝黡齪鰚鰖鰕鰔鰓鰏鹠鼦

js 齽齺鼫黍

默黕黑黍 asset.js.optimizer

麟黍 Drupal\Core\Asset\JsOptimizer

齽齺鵙鼽 js 齋齚龢鴫 css 齗齽齺鼫鸈鰍龢鰌鰉鵙鰅齁龢鷻黡鼜鼛鰉鵙齗黳黯鰁鳏鼃鯾鳒 bom

js 麉麅鼫黍

默黕 id asset.js.dumper

麟黍 Drupal\Core\Asset\AssetDumper

css 鴑鴎鸈鼤龢鱺鯽鼤齄鼽麟齋齚

鯻鯷黍

drupal 黁鳡鶋鼝 css 齋齚齗黳黯鵋鵘麷鯳鲳龢鶋鲻 bom 鯯龊龢鱁鰿鷡齏齌齗 css 齯鲜黧鳡鶋 bom utf8 黳黯

本书共88小节:

评论 (写第一个评论)