web-dev-qa-db-ja.com

Laravel Mixで複数のファイルを組み合わせる

私は現在Laravelミックスに飛び込んでいますが、これまでのところ、Laravelミックスとは何か、そしてそれがどのように機能するかを完全に理解していますが、一般的なプラクティスと「ハウツー」についてもう少し理解してください...

たとえば、次のファイル構造を考えてみます。

_/resources/assets/js/app.js (all global functions)
/resources/assets/js/index/index.js (functions specific to index.js)
/resources/assets/js/about/about.js (functions specific to about.js)
/resources/assets/js/contact/contact.js (functions specific to contact.js)
_

今、理想的には、次のように組み合わせて縮小したいです：

_/public/js/index/index-some_hash.js (including app.js)
/public/js/about/about-some_hash.js (including app.js)
/public/js/contact/contact-some_hash.js (including app.js)
_

私が理解している限り、これを達成する方法は次のようなものです。

_// Index
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/index/index.js'
], 'public/js/index/index.js').version();

// About
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/about/about.js'
], 'public/js/about/about.js').version();

// Contact
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/contact/contact.js'
], 'public/js/contact/contact.js').version();
_

私の質問

簡単に言えば、上記が私がやろうとしていることを行うための正しい方法であるかどうかを知りたいのですか？これを達成するためのより良い方法、またはより一般的な方法はありますか？

上記の構造が間違っていて、他の方法でファイルを組み合わせる必要がある場合は、知識を共有してください。ただし、十分な理由がない限り、次のことは避けたいと思います。

  • 各ページ、つまりapp.min.jsとindex.min.jsに2つの別々のファイルを提供します。 これには、ページごとに2つのルックアップが必要です。理想的には、できるだけ少なくする必要があります
  • サイトのすべてのページに同じファイルを提供しています。 キャッシングに関係なく、コードを使用しないページにコードを提供することは、リソースの浪費です...

一つのアイデア...

JSファイルの1つにコード行があることに気づきました。 require('./bootstrap');。私を昔ながらと呼んでいますが、JavaScriptではこれを見たことがありません（node.jsからのものだと思います）。つまり、特定のファイルへの依存関係として_bootstrap.js_ファイルをロードしているだけです。したがって、これを念頭に置いて、次の解決策がより良いでしょう：

about.js

_require('./app'); // Include global functions

// Do some magic here specifically for the 'about' page...
_

webpack.mix.js：

_mix.js(['resources/assets/js/*/*.js'); // For all pages
_

これがより良い解決策である場合、SASSを使用してファイルをどのように含めることができますか？上記をまったく改善できる方法はありますか？

node.jslaravelgulplaravel-elixirlaravel-mix
13
Ben Carey

ここで考慮しなければならない3つの主要な点があると思います（すべてが同じというわけではありません）。

  • Size-リソースが占めるスペースの量とダウンロードされるファイルのサイズ。
  • リクエストの数-ページにロードされているファイルの数。
  • Browser Cache-ファイルはサーバーではなくキャッシュからプルされます。

特定の状況では、app.jsファイルのサイズ、ページ固有のファイルのサイズ、コードなしの場合のapp.jsのコード、ページ固有のファイルの数、および別のファイルで同じリソースの一部を使用している場合異なるファイルで同じパッケージが必要です。

1つのファイル

ページ固有のファイルがかなり小さい場合は、メインのapp.jsファイルに含めます。

require('./index/index')
require('./about/about')
//etc

webpack.mix.js：

.js('resources/assets/js/app.js', 'public/js')

これは、サーバーにコンパイルされたファイルを1つだけ保存することを意味します。JavaScriptに対して要求は1つだけ作成され、サイト全体で以降のページの読み込みごとにキャッシュされる必要があります。

メインファイルとページ固有のファイル

ページ固有のファイルが多数ある場合、またはページ固有のファイルがそれほど大きくない場合は、ページ固有のファイルとは別にapp.jsをコンパイルすることをお勧めします。このアプローチの結果をOne fileアプローチと比較することを忘れないでください。One Fileアプローチの方がより効率的かもしれません。 。

webpack.min.js

.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/index/index.js', 'public/js/index')
.js('resources/assets/js/about/about.js', 'public/js/about')

これは、コードの主要なバルク（app.js）が引き続きキャッシュされ、ページ固有のコードに対して要求が1つだけ作成されることを意味します（これは、そのページの後続のロードごとにキャッシュされるはずです）。

app.jsファイルとページ固有のファイルの両方でパッケージが必要な場合、それらは2つで共有されないため、それらのリクエストの全体的なサイズが増加することに注意してください。 windowオブジェクト（jQueryなど）に追加できるパッケージは、app.jsにのみ含める必要があります。

1つのメインファイルといくつかのページ固有のファイル

かなり大きい1つまたは2つのページ固有のファイルがあるが、残りはそうでない場合は、ページ固有のファイルの大部分をapp.jsにコンパイルし、大きいファイルを独自のファイルにコンパイルすることができます。

すべてのページ固有のファイル

ページ固有のすべてのファイルが非常に大きく、app.jsファイルがそれほど大きくなく、ページ固有のファイル内のコード/ロジックをリファクタリングして共有できない場合にのみ、このルートをたどります異なるファイル間。

この方法は、次のようにする代わりに、質問の例に似ています。

webpack.min.js

mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/index/index.js'
], 'public/js/index/index.js').version();

あなたが持っているでしょう：

resources/assets/js/index/index.js

require('../app.js')

//rest of file

webpack.min.js

mix.js('resources/assets/js/index/index.js', 'public/js/index/index.js').version();

私はこのアプローチにすぐに到達することはありませんが、それが最も効率的である状況はほとんどありません。

まとめ

私は常にOne Fileアプローチに到達し、後で最適化を検討します（開発中に何かが本当に吸い込まれない限り）。

これもあなたにとって良い記事かもしれません https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2 -437c37efe3ff

お役に立てれば！

12
Rwd