mix.webpack('main.js')打包的的文件过大,如何把依赖文件和程序文件分开打包?求大神指点
请参考: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>
请参考:Laravel Mix 文档的 Vendor Extraction 介绍: http://d.laravel-china.org/do...
将应用程序的 JavaScript 与依赖库捆绑在一起的一个潜在缺点是,使得长期缓存更加困难。如,对应用程序代码的单独更新将强制浏览器重新下载所有依赖库,即使它们没有更改。
如果你打算频繁更新应用程序的 JavaScript,应该考虑将所有的依赖库提取到单独文件中。这样,对应用程序代码的更改不会影响 vendor.js 文件的缓存。Mix 的 extract 方法可以轻松做到:
extract 方法接受你希望提取到 vendor.js 文件中的所有的依赖库或模块的数组。使用以上代码片段作为示例,Mix 将生成以下文件:
public/js/manifest.js: Webpack 显示运行时
public/js/vendor.js: 依赖库
public/js/app.js: 应用代码
为了避免 JavaScript 错误,请务必按正确的顺序加载这些文件: