Yii 2 JS资产缩小问题

Question

I recently installed Yii 2.0.6 and I noticed that it loads

yii.js
yii.validation.js
yii.activeForm.js

from yiisoft/yii2/assets folder, so I wanted to overwrite these files and in common/config/main.php I added these lines of code but what it does is that it replaces only yii.js file but yii.validation.js and yii.activeForm.js keep being loaded.

'assetManager' => [
            'forceCopy' => YII_DEBUG,
            'bundles' => [
                'yii\web\YiiAsset' => [
                        'js' => ['all.min.js'],
                ],
            ],
        ],

How can I replace all those files by a single one?

Answer 1

You should also disable ActiveFormAsset and ValidationAsset :

'bundles' => [
    'yii\web\YiiAsset' => [
        'js' => ['all.min.js'],
    ],
    'yii\widgets\ActiveFormAsset' => false,
    'yii\validators\ValidationAsset' => false,
],

Read more : Customizing asset bundles or Combining & compressing assets

Answer 2

From docs :

1. Find all the asset bundles in your application that you plan to combine and compress.
2. Divide these bundles into one or a few groups. Note that each bundle can only belong to a single group.
3. Combine/compress the CSS files in each group into a single file. Do this similarly for the JavaScript files.

4. Define a new asset bundle for each group:

   • Set the css and js properties to be the combined CSS and JavaScript files, respectively.

   • Customize the asset bundles in each group by setting their css and js properties to be empty, and setting their depends property to be the new asset bundle created for the group.

So you need to use a tool to compress your files then you inject each to its adequate bundle :

'assetManager' => [
'bundles' => [
    'all' => [
        'class' => 'yii\web\AssetBundle',
        'basePath' => '@webroot/assets',
        'baseUrl' => '@web/assets',
        'css' => ['all-xyz.css'],
        'js' => ['all-xyz.js'],
    ],
    'A' => ['css' => [], 'js' => [], 'depends' => ['all']],
    'B' => ['css' => [], 'js' => [], 'depends' => ['all']],
    'C' => ['css' => [], 'js' => [], 'depends' => ['all']],
    'D' => ['css' => [], 'js' => [], 'depends' => ['all']],
],

See official docs for more info.