日期：2016年6月4日

yii2 合并js css的插件。

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

  1. composer require --prefer-dist skeeks/yii2-assets-auto-compress "*"
  2. Running composer as root/super user is highly discouraged as packages, plugins and scripts cannot always be trusted
  3. ./composer.json has been updated
  4. Loading composer repositories with package information
  5. Updating dependencies (including require-dev)
  6. - Installing mrclay/minify (2.3.0)
  7. Downloading: 100%
  9. - Installing natxet/cssmin (v3.0.4)
  10. Downloading: 100%
  12. - Installing tedivm/jshrink (v1.1.0)
  13. Downloading: 100%
  15. - Installing skeeks/yii2-assets-auto-compress (1.1.1)
  16. Downloading: 100%
  18. mrclay/minify suggests installing tubalmartin/cssmin (Support minify with CSSMin (YUI PHP port))
  19. Writing lock file
  20. Generating autoload files
  21. [root@iZ942k2d5ezZ fecshop]# 
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]#

安装完成后，添加配置：

  1. [
  2. 'bootstrap' => ['assetsAutoCompress'],
  3. 'components' =>
  4. [
  5. //....
  6. 'assetsAutoCompress' =>
  7. [
  8. 'class' => '\skeeks\yii2\assetsAuto\AssetsAutoCompressComponent',
  9. 'enabled' => true,
  10. 'jsCompress' => true,
  11. 'cssFileCompile' => true,
  12. 'jsFileCompile' => true,
  13. ],
  14. //....
  15. ]
  16. ]
[
    'bootstrap'    => ['assetsAutoCompress'],
    'components'    =>
    [
    //....
        'assetsAutoCompress' =>
        [
            'class'             => '\skeeks\yii2\assetsAuto\AssetsAutoCompressComponent',
            'enabled'           => true,
            'jsCompress'        => true,
            'cssFileCompile'    => true,
            'jsFileCompile'     => true,
        ],
    //....
    ]
]

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

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

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <meta name="csrf-param" content="_csrf">
  6. <meta name="csrf-token" content="WnhJLnc3NFoqSAceInFwb2g6IRhBBBkwLUgaeRpjfCILKg5HDVZGIA==">
  7. <title></title>
  8. <link href="/assets/css-compress/a4b0c42ec77e84de019e80dabfbbdd26.css?v=1466129605" rel="stylesheet">
  9. </head>
<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 放到了页面的底部：

  1. <script src="/assets/js-compress/6e9da28e384e6efd0451dfbc263c3fdd.js?v=1466129605"></script>
  2. <script type="text/javascript">jQuery(window).load(function () {
  3. 　$(document).ready(function(){$("#login-captcha-image").click();});
  4. });</script></body>
  5. </html>
<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合并不是万能，但是还是能解决一部分问题，譬如线上的电商网站等。