Yii2合并压缩资源文件

2018-05-16 · 🙈Lei · 0条 · 370次

Yii2(我使用的是basic版,advance版修改一下资源位置即可)可以使用Closure Compiler和YUI Compressor压缩JS和CSS文件,来减少访问页面的请求,提高访问速度。

下载Closure Compiler和YUI Compressor

这两个文件都是jar文件,使用java开发,地址:

下载Closure Compiler

下载YUI Compressor

创建配置文件

进入项目根目录,执行下面的命令创建配置文件:

>$ ./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