vue.js - Laravel Elixir如何文件分開打包？

Question

mix.webpack('main.js')打包的的檔案過大，如何把依賴檔案和程式檔案分開打包？求大神指點

Answer 1

請參考：Laravel Mix 文件的 Vendor Extraction 介紹：http://d.laravel-china.org/do...

將應用程式的 JavaScript 與依賴函式庫捆綁在一起的一個潛在缺點是，使得長期快取更加困難。如，對應用程式程式碼的單獨更新將強制瀏覽器重新下載所有依賴庫，即使它們沒有更改。

如果你打算頻繁更新應用程式的 JavaScript，應該考慮將所有的依賴函式庫提取到單獨檔案中。這樣，對應用程式程式碼的變更不會影響 vendor.js 檔案的快取。 Mix 的 extract 方法可以輕鬆做到：

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['vue'])

extract 方法接受你希望提取到 vendor.js 檔案中的所有的依賴函式庫或模組的陣列。使用以上程式碼片段作為範例，Mix 將產生以下檔案：

• public/js/manifest.js: Webpack 顯示運行時

• public/js/vendor.js: 依賴函式庫

• public/js/app.js: 應用程式碼

為了避免 JavaScript 錯誤，請務必以正確的順序載入這些檔案：

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>