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合并不是万能,但是还是能解决一部分问题,譬如线上的电商网站等。