yii2-asset-manager

新公司使用了yii2, 工作需要, 查阅了yii2的asset管理, 解决很多css, js, 管理问题. 做点记录原文.

Yii2 Asset可以理解为一个集合, 把对应的css, js圈起来, 当asset在view注册时候, 会把对应的css, js引入

快速使用

定义Asset 框架根目录/assets/AppAsset.php

namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot'; // 文件路径
    public $baseUrl = '@web'; // 访问url

    public $css = [
        'css/site.css', // 引入site.css
    ];

    public $js = [
        'js/site.js' // 引入site.js
    ];
    public $depends = [
        'yii\web\YiiAsset', // 依赖YiiAsset And BootstrapAsset
        'yii\bootstrap\BootstrapAsset',
    ];

    public $jsOptions = [
        condition' => 'lte IE9'
    ]; // css 配置, css引入位置,设置浏览器版本等

    public $cssOptions = [
        'position' => '\yii\web\View::POS_HEAD',
    ]; // js配置, js引入配置等等.
}

随便找个视图 框架根目录/view

<?php \app\assets\AppAsset::register($this); ?>
<?php $this -> title = "Yii2 Asset Demo";?>
<div class="container">
    <h1> Hello Yii2 Asset </h1>
</div>

访问页面, 发现css, js, jquery, bootstrap…都引入到页面了.

动态引入对应的js文件

可以值视图中直接配置.

1	$bundle->js[] = 'i18n/' . \Yii::$app->language . '.js'; // 根据framework设置的语言, 引入i18n目录下对应语言的js文件

也可在asset类中的init中方法中

public function init()
{
    parent::init(); // TODO: Change the autogenerated stub
    $this -> > js[] = 'i18n/' . \Yii::$app->language . '.js'; // 根据framework设置的语言, 引入i18n目录下对应语言的js文件
}

不推荐这样使用, 语言对应最好是放在js处理.*

合理的使用asset(个人理解, 如有不妥, 欢迎拍砖)

架设一个应用分前台和后台, 有必要新建三个 CommonAsset(前后台都需要用的css, js), BackendAsset(后台用的公共css, js), FrontendAsset(前台公共使用的css, js)


// common asset define
namespace app\assets;
class CommonAsset extend AssetBundle
{
    public $basePath = "common/path";
    public $baseUrl = "/";

    public $css = [
        'css/common.css'
    ];

    public $js = [
        'js/common.js',
    ];
}


// backend asset define
namespace app\assets;
class BackendAsset extends AssetBundle
{
    public $basePath = "backend/path";
    public $baseUrl = "/";

    public $depends = [
        'app\assets\CommonAsset'
    ];
}


// frontend asset define
namespace app\Assets;
class FrontendAsset extends AssetBundle
{
    public $basePath = "frontend/path";
    public $baseUrl = "/";
    public $depends = [
        'app\assets\CommonAsset'
    ];
}

在对应的前台独立的view, 对应依赖 FrontendAsset, 对应的后台独立view 依赖对应BackendAsset. 实现了asset管理

压缩优化

压缩策略

将所有的css压缩成单个app.min.css, 所有的js文件压缩成单个app.min.js
分组, 前台css, js, 压缩成对应的frontend.min.css,frontend.min.js. 后台的css, js对应压缩成backend.min.css, backend.min.js

使用`yii asset/template assets-tpl.php`先生成配置模版

模版配置好后, 通过命令生成yii asset assets-tpl.php assets-prod.php , 生成用于生产环境的配置文件.

配置策略1

配置如下


// 声明webroot, web目录, 根据自己应用目录, 在console环境下, 必须声明
Yii::setAlias('@webroot', __DIR__ . '/../../web');
Yii::setAlias('@web', '/');

return [
    'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',
    'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',
    'deleteSource' => false,
    'bundles' => [ // 将所有assets/下的asset都写在这个数组中
        'yii\web\YiiAsset',
        'yii\web\JqueryAsset',
    ],
    'targets' => [
        'all' => [
            'class' => 'yii\web\AssetBundle',
            'basePath' => '@webroot/assets',
            'baseUrl' => '@web/assets',
            'js' => 'js/all-{hash}.js',
            'css' => 'css/all-{hash}.css',
        ],
    ],
    // Asset manager configuration:
    'assetManager' => [
        'basePath' => '@webroot/assets',
        'baseUrl' => '@web/assets',
    ],
];

配置策略2