文件切割

未匹配的标注

库代码分割

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 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/laravel-mix/4.0...

译文地址:https://learnku.com/docs/laravel-mix/4.0...

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
贡献者:2
讨论数量: 0
发起讨论 只看当前版本


暂无话题~