yii2 合并js css的插件。

https://github.com/skeeks-semenov/yii2-assets-auto-compress
今天安装了一下这个插件,用来合并js,css。
下面是我安装的步骤:

composer  require --prefer-dist skeeks/yii2-assets-auto-compress "*"
Running composer as root/super user is highly discouraged as packages, plugins and scripts cannot always be trusted
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
  - Installing mrclay/minify (2.3.0)                       
    Downloading: 100%         

  - Installing natxet/cssmin (v3.0.4)
    Downloading: 100%         

  - Installing tedivm/jshrink (v1.1.0)
    Downloading: 100%         

  - Installing skeeks/yii2-assets-auto-compress (1.1.1)
    Downloading: 100%         

mrclay/minify suggests installing tubalmartin/cssmin (Support minify with CSSMin (YUI PHP port))
Writing lock file
Generating autoload files
[root@iZ942k2d5ezZ fecshop]# 

安装完成后,添加配置:

[
    'bootstrap'    => ['assetsAutoCompress'],
    'components'    =>
    [
    //....
        'assetsAutoCompress' =>
        [
            'class'             => '\skeeks\yii2\assetsAuto\AssetsAutoCompressComponent',
            'enabled'           => true,
            'jsCompress'        => true,
            'cssFileCompile'    => true,
            'jsFileCompile'     => true,
        ],
    //....
    ]
]

添加完成后,去我的后台,发现了js都给合并起来放到了页面的底部。

css合并放到了页面的顶部:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-param" content="_csrf">
    <meta name="csrf-token" content="WnhJLnc3NFoqSAceInFwb2g6IRhBBBkwLUgaeRpjfCILKg5HDVZGIA==">
    <title></title>
    <link href="/assets/css-compress/a4b0c42ec77e84de019e80dabfbbdd26.css?v=1466129605" rel="stylesheet">
</head>

js 放到了页面的底部:

<script src="/assets/js-compress/6e9da28e384e6efd0451dfbc263c3fdd.js?v=1466129605"></script>
<script type="text/javascript">jQuery(window).load(function () {
 $(document).ready(function(){$("#login-captcha-image").click();});
});</script></body>
</html>

不过这种合并js和css的方法,还是会存在一定的问题,就和magento的css和js的合并,有一些插件合并起来还是会报错,我的后台用的是dwz,合并js后,会存在问题,尤其是dwz需要加载一个.xml文件,开启合并后,整体不能用了。

不过对于前台,如果不用一些乱起八糟的js库包,应该问题不大。

总体来说这个js和css合并不是万能,但是还是能解决一部分问题,譬如线上的电商网站等。

发表评论

电子邮件地址不会被公开。 必填项已用*标注