Question

我无法理解Yii2资产的组合和压缩是如何工作的。我阅读了指南中的部分（http://www.yiiframework.com/doc-2.0/guide-structure-assets.html），但仍然无法使其发挥作用或者至少理解这个问题的基础知识。

从那里给出的例子我无法重现并解决以下场景。

AppAsset 包含应用程序的主要css / js。共享和基本代码应该包含在这里。这个依赖于另一个名为ExternalAssets的文件，而该文件依赖于YiiAsset，BootstrapAsset等等。

CheckoutAsset 包含仅与结帐流程相关的代码。也应包含上述内容，因为它添加了自定义功能，但仅与此部分相关。 $取决于AppAsset。

ProductViewAsset 与上述内容相同，但与给定产品的可视化相关。

资产配置如下：

'bundles' => [
    'yii\web\JqueryAsset',
    'rmrevin\yii\fontawesome\AssetBundle',
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
    'yii\bootstrap\BootstrapPluginAsset',
    'yii\widgets\ActiveFormAsset',
    'frontend\assets\ExternalAssets',
    'frontend\assets\AppAsset',
],
'targets' => [
    'app' => [
        'class' => 'yii\web\AssetBundle',
        'basePath' => '@webroot/assets',
        'baseUrl' => '@web/assets',
        'js' => 'js/app-{hash}.js',
        'css' => 'css/app-{hash}.css',
        'depends' => [ ],
    ],
]

此时我能够压缩一切应该是常见的东西（尽管可能会删除一些不必要的文件），但在使用ProductViewAsset或CheckoutAsset的页面中，包含的文件不会得到以同样的方式压缩。

也许可以在结帐过程中将所有内容压缩到单个文件（常见数据+结帐数据），也可能不是由于缓存原因。不知道这是否可能但我无法使其发挥作用。这就是我对此的看法。我尝试这样做是因为它似乎很自然，但我开始遇到像这样的错误 PHP注意＆＃39; yii \ base \ ErrorException＆＃39;在尝试制作不同的资产包组时，使用消息＆＃39;未定义的索引：frontend \ assets \ ExternalAssets＆＃39; ：

'targets' => [
    'app' => [
        'class' => 'yii\web\AssetBundle',
        'basePath' => '@webroot/assets',
        'baseUrl' => '@web/assets',
        'js' => 'js/app-{hash}.js',
        'css' => 'css/app-{hash}.css',
        'depends' => [
           // 'frontend\assets\ExternalAssets'
        ],
    'checkout' => [
        'class' => 'yii\web\AssetBundle',
        'basePath' => '@webroot/assets',
        'baseUrl' => '@web/assets',
        'js' => 'js/checkout-{hash}.js',
        'css' => 'css/checkout-{hash}.css',
        'depends' => [
           'frontend\assets\AppAssets'
        ],
    ],

也许我在这里看错了方法，但我无法弄清楚这样做的最佳方法是什么。我认为将所有内容压缩到单个文件应该比不组合和压缩文件更好，但我认为在这种情况下可以优化组合和压缩方法。

谢谢！

Answer 1

分组资产捆绑我们已经说明了如何将所有资产捆绑包合并为一个捆绑包，以最小化对应用程序中引用的资产文件的HTTP请求。在实践中，这并非总是可取的。例如，假设您的应用程序有一个“前端”和一个“后端”，每个后端使用一组不同的JavaScript和CSS文件。在这种情况下，将两端的所有资产束合并为一个是没有意义的，因为“前端”不使用“前端”的资产束，这将浪费发送网络的带宽。请求“前端”页面时显示“后端”资产。

要解决上述问题，您可以将资产捆绑包分为几组，并为每个组组合资产捆绑包。以下配置显示了如何对资产捆绑包进行分组：

return [
    ...
    // Specify output bundles with groups:
    'targets' => [
        'allShared' => [
            'js' => 'js/all-shared-{hash}.js',
            'css' => 'css/all-shared-{hash}.css',
            'depends' => [
                // Include all assets shared between 'backend' and 'frontend'
                'yii\web\YiiAsset',
                'app\assets\SharedAsset',
            ],
        ],
        'allBackEnd' => [
            'js' => 'js/all-{hash}.js',
            'css' => 'css/all-{hash}.css',
            'depends' => [
                // Include only 'backend' assets:
                'app\assets\AdminAsset'
            ],
        ],
        'allFrontEnd' => [
            'js' => 'js/all-{hash}.js',
            'css' => 'css/all-{hash}.css',
            'depends' => [], // Include all remaining assets
        ],
    ],
    ...
];

如您所见，资产捆绑包分为三组：allShared，allBackEnd和allFrontEnd。它们每个都依赖于一组适当的资产捆绑。例如，allBackEnd取决于app \ assets \ AdminAsset。当以此配置运行资产命令时，它将根据上述规范组合资产束。

Answer 2

我不确定我是否理解您提出的问题，这就是我对您的要求。

在站点控制器中执行正常操作，调用视图“ site / assets /”

    public function actionAssets()
{
    return $this->render('assets');
}

像下面的例子一样排列视图-

<?php
use dmstr\web\AdminLteAsset;
use backend\assets\AppAsset;
use dosamigos\fileupload\FileUploadPlusAsset;
use dosamigos\fileupload\FileUploadAsset;
use dosamigos\gallery\GalleryAsset;
use dosamigos\fileupload\FileUploadUIAsset;
use dosamigos\gallery\DosamigosAsset;
use budyaga\cropper\assets\CropperAsset;
use kartik\base\Html5InputAsset;
use kartik\base\WidgetAsset;
use kartik\form\ActiveFormAsset;
use kartik\affix\AffixAsset;
use kartik\alert\AlertAsset;
use kartik\color\ColorInputAsset;
use kartik\date\DatePickerAsset;
use kartik\datetime\DateTimePickerAsset;
use kartik\depdrop\DepDropAsset;
use kartik\depdrop\DepDropExtAsset;
use kartik\file\FileInputThemeAsset;
use kartik\growl\GrowlAsset;
use kartik\base\AnimateAsset;
use kartik\select2\Select2Asset;
use kartik\sidenav\SideNavAsset;
use kartik\spinner\SpinnerAsset;
use kartik\switchinput\SwitchInputAsset;
use kartik\time\TimePickerAsset;
use kartik\touchspin\TouchSpinAsset;
use kartik\typeahead\TypeaheadAsset;
use kartik\grid\GridViewAsset;
use kartik\dialog\DialogAsset;

$view = $this;

AdminLteAsset::register($this);
AppAsset::register($this);

FileUploadPlusAsset::register($view);
FileUploadAsset::register($view);
GalleryAsset::register($view);
FileUploadUIAsset::register($view);
DosamigosAsset::register($view);
CropperAsset::register($view);
Html5InputAsset::register($view);
WidgetAsset::register($view);
ActiveFormAsset::register($view);
AffixAsset::register($this);
AlertAsset::register($view);
ColorInputAsset::register($view);
DatePickerAsset::register($view);
DateTimePickerAsset::register($view);
DepDropAsset::register($view);
DepDropExtAsset::register($view);
FileInputThemeAsset::register($view);
GrowlAsset::register($view);
AnimateAsset::register($view);
Select2Asset::register($view);
SideNavAsset::register($this);
SpinnerAsset::register($view);
SwitchInputAsset::register($view);
TimePickerAsset::register($view);
TouchSpinAsset::register($view);
TypeaheadAsset::register($view);
GridViewAsset::register($view);
DialogAsset::register($view);

?>
<?php $this->beginPage() ?>
<?php $this->beginBody() ?>
<p>Done</p>
<?php $this->endBody() ?>
<?php $this->endPage() ?>

然后在进行部署以重新编译资产之前，请确保先单击此链接。

Yii2组合＆amp;压缩不与捆绑包组合使用的资产

2 个答案: