文件切割

未匹配的标注

库代码分割

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 文件都会被缓存很长时间。

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
上一篇 下一篇
Summer
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
贡献者:2
讨论数量: 0
发起讨论 只看当前版本


暂无话题~