Yii2合并压缩资源文件
2018-05-16
921
Lei
0
Yii2（我使用的是basic版，advance版修改一下资源位置即可）可以使用Closure Compiler和YUI Compressor压缩JS和CSS文件，来减少访问页面的请求，提高访问速度。
下载Closure Compiler和YUI Compressor
这两个文件都是jar文件，使用java开发，地址：
创建配置文件
进入项目根目录，执行下面的命令创建配置文件：
>$ ./yii asset/template assets.php
下面是我的修改过的配置文件：
我下面的配置是JS和CSS都使用YUI Compressor压缩，你可以通过配置自己选择使用Closure Compiler还是YUI Compressor来压缩。
<?php
/**
* Configuration file for the "yii asset" console command.
*/
// In the console environment, some path aliases may not exist. Please define these:
Yii::setAlias('@webroot', __DIR__ . '/web');
Yii::setAlias('@web', '/');
return [
// Adjust command/callback for JavaScript files compressing:
// 使用Closure Compiler压缩JS
// 'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',
// 使用YUI Compressor压缩J<span class="redactor-invisible-space">S</span>
'jsCompressor' => 'java -jar yuicompressor.jar --type js {from} -o {to}',
// Adjust command/callback for CSS files compressing:
'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',
// Whether to delete asset source after compression:
'deleteSource' => false,
// The list of asset bundles to compress:要压缩的assets列表。这个排列顺序我忘记有没有影响了，如果提示找不到某个assets的时候，就按照被依赖的在上，以此往下放置。例如YiiAsset依赖JqueryAsset，则将JqueryAsset放在上面。
'bundles' => [
'yii\web\JqueryAsset',
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
'app\assets\AppAsset',
],
// Asset bundle for compression output:<span class="redactor-invisible-space">
// 生成的合并文件放在了web/assets/目录下的css和js目录下，如果在该目录下没有js和css两个文件夹，请创建，不然会提示没有对应的文件或文件夹</span>
'targets' => [
'all' => [
'class' => 'yii\web\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => 'js/dist-{hash}.js',
'css' => 'css/dist-{hash}.css',
'depends' => [
'yii\web\JqueryAsset',
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
'app\assets\AppAsset',
]
],
// 可以配置不同的压缩选项，根据不同的Asset合并压缩为多个不同的文件，当页面使用不同的Assets时会调用相应的合并压缩的资源文件。
<span class="redactor-invisible-space"> 'admin' => [
'class' => 'yii\web\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => 'js/admin-{hash}.js',
'css' => 'css/admin-{hash}.css',
'depends' => [
'yii\web\JqueryAsset',
'yii\web\YiiAsset',
'app\assets\AdminAsset',
]
],</span>
],
// Asset manager configuration:
'assetManager' => [
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
],
];
生成压缩合并资源后要使用的配置文件
执行如下命令来生成配置文件：
>$ ./yii asset assets.php config/assets-prod.php
生成的文件（因为我生成下面的文件的时候并没有在上一步的assets.php中添加‘admin’部分的配置，所以下面的代码中并没有关于‘app\assets\AdminAssets’的内容）如下所示：
<?php
/**
* This file is generated by the "yii asset" command.
* DO NOT MODIFY THIS FILE DIRECTLY.
* @version 2018-05-14 18:42:32
*/
return [
'all' => [
'class' => 'yii\\web\\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => [
'js/dist.js',
],
'css' => [
'css/dist.css',
],
'depends' => [],
'sourcePath' => null,
],
'yii\\web\\JqueryAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'all',
],
],
'yii\\web\\YiiAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'yii\\web\\JqueryAsset',
'all',
],
],
'yii\\bootstrap\\BootstrapAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'all',
],
],
'yii\\bootstrap\\BootstrapPluginAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'yii\\web\\JqueryAsset',
'yii\\bootstrap\\BootstrapAsset',
'all',
],
],
'app\\assets\\AppAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'yii\\web\\YiiAsset',
'yii\\bootstrap\\BootstrapPluginAsset',
'all',
],
],
];
使用合并压缩文件
在config/web.php中添加下面的配置即可使用压缩合并后的js和css文件：
<span class="redactor-invisible-space">‘components’ => [
</span> 'assetManager' => [
'appendTimestamp' => true,
// comment out in dev envirenment
'bundles' => require(__DIR__.'/assets-prod.php'),
]
]
开发环境将bundles注释掉即可。
添加了上面的配置后，如果使用了AppAssets.php，那么就会自动加载dist.js和dist.css；如果使用了AdminAssets.php，那么就会自动加载admin.js和dist.css。
0