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>