文件切割
库代码分割
mix.js(src, output).extract(['any', 'vendor', 'library']);
把所有的 JavaScript 都打包成一个文件会伴随着潜在的风险:每次更新项目中就算很小的一部分都需要破坏所有用户的缓存,这意味着你的第三方库需要重新被下载和缓存。这样很不好。
一个解决的办法是分离或者提取你的库文件
- 应用代码:
app.js
- Vendor 库:
vendor.js
- Manifest (webpack Runtime):
manifest.js
mix.extract(['vue', 'jquery']);
extract
方法接受一个你想要从打包文件里提取出的库的数组,使用这个方法,Vue 和 jQuery 的源代码都会被放在 vendor.js
里,而不是 app.js
。如果在未来你需要对应用代码做一些微小的变动,并不会对大的 vendor 库产生影响,它们依然会留在长期缓存。
一旦执行 webpack 打包文件,你会发现三个新的文件,你可以在 HTML 页面底部引用它们。
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
实际上,我们付出了一些 HTTP 请求的代价(就是会多请求几次)来换取长期缓存的提升。
Manifest 文件是什么?
webpack编译的时候会有一些 run-time 代码协助其工作。如果没有使用 mix.extract(),这些代码你是看不到的,它会在打包文件里,然而,如果我们分离了代码并且允许长期缓存,在某些地方就需要这些 run-time 代码,所以,mix会把它提取出来,这样一来,vendor 库和 manifest 文件都会被缓存很长时间。
本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: