我目前在潛水的過程分爲Laravel混合，到目前爲止，雖然我完全理解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單獨的文件。 這需要每頁兩個查找，最好應該是儘可能
服務相同的文件在我的網站的所有網頁少。 服務代碼，這是不會使用它的網頁是資源的浪費，不管緩存...

一個想法...

我注意到一行代碼中的一個JS文件; 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包含文件呢？有沒有辦法可以改善上述情況？

來源

2017-03-06 Ben Carey

我認爲sass有一個'import'語句，它的行爲像'require'在javascript中 –

@CerlinBoss完美，這是否意味着我的'可能'解決方案比第一個更好？ –

我能看到的唯一區別是一個纖細的混合文件。 –

我說有，你要在這裏考慮3米主要的東西（他們並不都是平等的）：

尺寸 - 你的資源會佔用的空間量和文件正在下載的大小。
請求數 - 有多少文件正在加載到頁面中。
瀏覽器緩存 - 文件將從緩存中取出，而不是從服務器中取出。

在您的具體情況將取決於您的app.js文件有多大是它自己的，你的頁面的具體文件將有多大是沒有代碼app.js，你的代碼有多少頁的特定文件，如果你在你的不同文件中使用一些相同的資源，例如在不同的文件中需要相同的包。

一個文件

如果你的頁面的特定文件都相當小的話，我只想包括他們在您的主要app.js文件：

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

webpack.mix.js：

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

這意味着你是e只在您的服務器上存儲一個編譯的文件，只有一個請求正在爲您的JavaScript做出，並且應該爲整個網站的每個後續頁面加載而緩存。

主文件和一個網頁特定文件

如果您有大量的頁面特定文件或你的頁面的特定文件不小，那麼我建議有編譯您app.js獨立你的頁面特定文件。不要忘記比較這種方法的結果與一個文件的方法，因爲一個文件的方法可能仍然更有效。

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）中，主要大宗仍然會得到緩存，只有一個請求是針對網頁的特定代碼發（應該再緩存該頁面的每個後續加載）。

請注意，如果您要在app.js文件和頁面特定文件中要求包，它們將不會在2上共享，因此它會增加這些請求的總體大小。可以添加到window對象（例如jQuery）的軟件包應僅包含在您的app.js中。

一個主文件和幾個頁面特定文件

如果你有一個相當大的，但其餘的都沒有，你可以編譯你的大部分頁面特定的一個或兩個頁面的特定文件文件到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();

你會：

資源/資產/ 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();

我永遠不會達到這種方式，雖然直接，並且有很少的情況下，它將是最有效的。

摘要

我總是會端起一個文件方法，再看看後面優化（除非事情發展過程中確實吸出），如過早的優化會導致代碼的氣味，更難可維護性。

這可能是一個很好的文章對您以及https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2-437c37efe3ff

希望這有助於！

來源

2017-07-16 10:08:06

合併多個文件與Laravel混合

我的問題

一個想法...

回答

相關問題