yii2 asset合并压缩(多个资源文件配置) [ 2.0 版本 ]
yii2中可以通过 Closure Compiler, YUI Compressor这两个工具对css和js进行压缩,达到控制前端资源文件加载数量,提高网页打开速度
具体步骤:
1、下载Closure Compiler, YUI Compressor的jar文件,保存在项目根目录下,下载地址:
Closure Compiler下载
YUI Compressor 下载
2、通过命令创建合并压缩的配置文件:
./yii asset/template assets.php
创建的资源文件如下:
<?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__ . '/frontend/web');
Yii::setAlias('@web', '/');
return [
// Adjust command/callback for JavaScript files compressing:
'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {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:
'bundles' => [
'frontend\assets\AppAsset',
'frontend\assets\DemoAsset',
// 'yii\web\YiiAsset',
// 'yii\web\JqueryAsset',
],
// Asset bundle for compression output:
'targets' => [
'home' => [
'class' => 'yii\web\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => 'js/all-site-{hash}.js',
'css' => 'css/all-site-{hash}.css',
'depends' => [
'frontend\assets\AppAsset',
]
],
'about' => [
'class' => 'yii\web\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => 'js/all-demo-{hash}.js',
'css' => 'css/all-demo-{hash}.css',
'depends' => [
'frontend\assets\DemoAsset',
]
]
],
// Asset manager configuration:
'assetManager' => [
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
],
];
上面代码是我已经配置好的,通过yii2框架高级模版来做的demo
'frontend\assets\AppAsset' 和 'frontend\assets\DemoAsset', 中分别有个site.js和demo.js 里面有个变量赋值,压缩后可以看到区别
上述代码的target数组中,设置了home和about,他们分别依赖与不同的资源文件,这样压缩打包的时候,回针对home和about将依赖的资源文件打包和压缩为一个js和css文件
配置好上面的文件后,通过命令生成压缩打包后使用的配置文件:
./yii asset assets.php assets-prod.php
生成的文件如下:
<?php
/**
* This file is generated by the "yii asset" command.
* DO NOT MODIFY THIS FILE DIRECTLY.
* @version 2017-10-20 10:11:53
*/
return [
'home' => [
'class' => 'yii\\web\\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => [
'js/all-site-e6cf414603695a5db073c8ea3a4095a2.js',
],
'css' => [
'css/all-site-9d3810c97623d24dda614cc3fafe52a8.css',
],
'depends' => [],
'sourcePath' => null,
],
'about' => [
'class' => 'yii\\web\\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => [
'js/all-demo-9b43bbecbf643bbc70b2d25e61d03b2c.js',
],
'css' => [
'css/all-demo-9d3810c97623d24dda614cc3fafe52a8.css',
],
'depends' => [],
'sourcePath' => null,
],
'frontend\\assets\\AppAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'home',
],
],
'frontend\\assets\\DemoAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'about',
],
],
];
这里可以看到资源文件的js和css都是空的,但是依赖了我们压缩和打包后的文件,在frontend/web/asset/js 和 css下可以看到压缩后的文件
然后我们需要在main.php中配置assetManager对应生产和开发环境需要调用的资源文件
components' => [
'assetManager' => [
'appendTimestamp' => true,
'bundles' => require(__DIR__ . '../../../' .'assets-prod.php'),
],
],
如果是开发环境,将bundles
注释即可,生产环境下view
层会根据配置调用asset-prod.php
中对应资源类
通过这种方式可以简化目前项目中的合并和压缩方法
Abe 常州
注册时间:2015-09-02
最后登录:2018-06-06
在线时长:26小时17分
最后登录:2018-06-06
在线时长:26小时17分
- 粉丝2
- 金钱1930
- 威望20
- 积分2390
共 4 条评论
写得很详细,赞一个,本站也用此方法进行压缩了。
赞!好东西!已收藏!:)
可以像webpack一样把小图打包成代码吗?
最新版的 yuicompress-2.4.8.jar 在windows下有个bug,需要把 "-o" 改成 ">"。