Abe 2017-10-20 23:29:08 7156次浏览 4条评论 7 5 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中对应资源类
通过这种方式可以简化目前项目中的合并和压缩方法

觉得很赞
您需要登录后才可以评论。登录 | 立即注册