mirror of
https://github.com/yiisoft/yii2.git
synced 2025-11-10 02:13:17 +08:00
docs/guide-ja/structure-assets.md - updated [ci skip]
This commit is contained in:
@ -588,3 +588,55 @@ yii asset assets.php config/assets-prod.php
|
|||||||
|
|
||||||
> Info|情報: `asset` コマンドを使うことは、アセットの結合・圧縮のプロセスを自動化する唯一の選択肢ではありません。
|
> Info|情報: `asset` コマンドを使うことは、アセットの結合・圧縮のプロセスを自動化する唯一の選択肢ではありません。
|
||||||
優秀なタスク実行ツールである [grunt](http://gruntjs.com/) を使っても、同じ目的を達することが出来ます。
|
優秀なタスク実行ツールである [grunt](http://gruntjs.com/) を使っても、同じ目的を達することが出来ます。
|
||||||
|
|
||||||
|
|
||||||
|
### アセットバンドルをグループに分ける <span id="using-asset-groups"></span>
|
||||||
|
|
||||||
|
場合によっては、全ての JavaScript と CSS のファイルを一つに圧縮することが良い選択肢にならないことがあります。
|
||||||
|
例えば、あなたのアプリケーションがフロントエンドとバックエンドに分れていて、それぞれが自分専用の JavaScript と CSS のファイルを持っていると想像して下さい。
|
||||||
|
このような場合に全てのファイルを一つに結合することは、余分なネットワークトラフィックを発生させるため、合理的ではありません。
|
||||||
|
フロントエンドにアクセスするときに、バックエンドのファイルのソースコードもロードされることになります。
|
||||||
|
逆の場合もまた同じです。
|
||||||
|
|
||||||
|
`asset` コマンドを実行するときに、二つ以上のターゲットバンドルを指定して、バンドルをグループ化することが出来ます。
|
||||||
|
どのバンドルをどのグループに圧縮するかを指定するためには、ターゲットバンドルの構成情報の `depends` キーを使います。
|
||||||
|
一つに結合すべきバンドルのクラス名を `depends` キーに列挙するだけで良いのです。
|
||||||
|
ターゲットバンドルのうちの一つは、`depends` キーを空にしておくことが出来ます。
|
||||||
|
そうすれば、そのターゲットバンドルが残りのソースバンドルの全てを含むことになります。
|
||||||
|
|
||||||
|
そのような構成情報は次のようなものになります。
|
||||||
|
|
||||||
|
```php
|
||||||
|
return [
|
||||||
|
...
|
||||||
|
// 出力されるバンドルをグループ化する
|
||||||
|
'targets' => [
|
||||||
|
'allShared' => [
|
||||||
|
'js' => 'js/all-shared-{hash}.js',
|
||||||
|
'css' => 'css/all-shared-{hash}.css',
|
||||||
|
'depends' => [
|
||||||
|
// バックエンドとフロントエンドで共有される全てのアセットを含める
|
||||||
|
'yii\web\YiiAsset',
|
||||||
|
'app\assets\SharedAsset',
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'allBackEnd' => [
|
||||||
|
'js' => 'js/all-{hash}.js',
|
||||||
|
'css' => 'css/all-{hash}.css',
|
||||||
|
'depends' => [
|
||||||
|
// バックエンドだけのアセットを含める
|
||||||
|
'app\assets\AdminAsset'
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'allFrontEnd' => [
|
||||||
|
'js' => 'js/all-{hash}.js',
|
||||||
|
'css' => 'css/all-{hash}.css',
|
||||||
|
'depends' => [], // 残りのアセット全てを含める
|
||||||
|
],
|
||||||
|
],
|
||||||
|
...
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note|注意: ソースのアセットバンドルの依存関係に気を付けてください。
|
||||||
|
注意しないと、独立させたはずのターゲットバンドルが実際にはお互いに依存しあっている、ということになり得ます。
|
||||||
|
|||||||
Reference in New Issue
Block a user