yii2-asset

资源包,一个页面用到的 css js image vedio 等等,都是属于这个页面的资源。

使用 asset 合并压缩

http://www.yiichina.com/tutorial/1496

使用 Closure Compiler 来压缩 js 文件。
使用 YUI Compressor 来压缩 css 文件

下载:

配置 AssetManager

// 设置资源包
[
    'assetManager' => [
        //append time stamps to assets for cache busting
        'appendTimestamp' => true,
        'bundles' => [
            // 使用 CDN 覆盖默认的资源包
            'yii\web\JqueryAsset' => [
            // 因为是外部资源,所以需要覆盖掉原有的值 '@bower/jquery/dist'
            'sourcePath' => null,
            // 覆盖原有值 'jquery.js'
            'js' => ['//cdn.bootcss.com/jquery/2.2.4/jquery.min.js']
        ],
        // 由于部分电脑访问 cdn.bootcss.com 太慢,临时禁用 cdn
        'yii\bootstrap\BootstrapAsset' => [
                  'sourcePath' => null,
                    'css' => ['//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css']
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'sourcePath' => null,
                    'js' => ['//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js']
                ]
            ],
,
]

您可以将前端资源中的文件列表路径设置为 null 来告诉前端资源管理器不要去注册他们。这在开发环境中注册额外脚本的时候非常实用:

<?php
namespace common\assets;
use yii\web\AssetBundle;
 
class ReactAsset extends AssetBundle
{
    public $sourcePath = null;
 
    public $js = [
        YII_ENV_DEV ? "//fb.me/react-15.0.1.js" : "//fb.me/react-15.0.1.min.js",
        YII_ENV_DEV ? "//fb.me/react-dom-15.0.1.js" : "//fb.me/react-dom-15.0.1.min.js",
        YII_ENV_DEV ? "//cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js" : null,
    ];
}

Cache Busting for Assets

经常发生在生产服务器中当你启用 JS 或者 CSS 文件的 HTTP 缓存时。缺点是如果您更改这些文件,由于 HTTP 缓存客户端仍然使用老版本。现在您可以通过配置 yii\web\AssetManager::appendTimestamp 来清除公共的 JS 和 CSS 文件缓存。通过设置该属性为 true,相应的 JS 和 CSS 文件的文件修改时间将被添加到每个 JS/CSS 网址中。因此,每当文件被修改,客户端将始终接收到最新版本:

return [
    'components' => [
        'assetManager' => [
            'class' => 'yii\web\AssetManager',
            'appendTimestamp' => true,
        ],
        // ...
    ],
]

强制 Asset 转换

Asset 包支持自动 asset 转换, 例如转换 LESS 为 CSS。然而在源 assets 变更时适当的检测资源的代价是昂贵的,特别是一个资源被另一个导入。为了解决这个问题,您现在只需要配置 assetManager 如下总是强制转换 assets:

[
    'components' =>  [
        'assetManager' => [
            'converter' => [
                'forceConversion' => true,
            ]
        ]
    ]
];

使用 Grunt

可以放弃 Yii2 自带的 Assets,而使用 Grunt 来处理 css、font、images、javascrit 等静态资源。

https://github.com/samdark/yii2-cookbook/blob/master/book/structure-asset-processing-with-grunt.md

使用 Gulp

项目实例:https://github.com/yiisoft-contrib/yiiframework.com

新建目录 app/assets/src

目录结构为:

修改文件:

<?php
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $sourcePath = '@app/assets/dist';
    public $css = [
        YII_ENV_DEV ? 'css/all.css' : 'css/all.min.css'
    ];
    public $js = [
        YII_ENV_DEV ? 'js/all.js' : 'js/all.min.js'
    ];
}