Yii2合并压缩资源文件
2018-05-16 ·
🙈Lei ·
0条 ·
664次
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