使用Webpack的ES6代码分割技术

Question

我正在构建一个网页应用程序（使用ES6编写的React应用程序），现在它变得越来越大了。结果，我发现在移动设备上下载JS文件的时间太长，难以接受。我正在尝试理解如何将大型JS应用程序分块，以便按需加载。我正在使用webpack，并阅读了这篇文章：

https://webpack.github.io/docs/code-splitting.html

根据这篇文章，我已将我的代码分成了app.js和vendor.js两个部分，其中vendor.js包含所有第三方模块/插件。

我希望进一步将app.js文件拆分成多个入口点，然后根据需要下载各个块。上面的文章介绍了如何使用CommonJS或AMD实现此操作。但是，我正在使用ES6的原生模块而不是这两个选项，并且找不到定义每个文件的依赖关系的语法（基本上是.ensure()的ES6版本）。

我的问题：

• 我能否利用webpack的按需块功能使用ES6模块，还是需要使用AMD或CommonJS才能实现？
• 如果我需要使用AMD/CommonJS，如何避免对整个应用程序进行重构？
• 我需要做什么才能确保依赖关系会异步加载？
• 有没有人有教程/指南/代码示例的链接，以帮助说明我需要的内容？

- Ghan

---

你有没有找到解决办法？ - gibo

我没有。lorefnon下面的答案并没有解决我的问题——我已经能够将代码分成供应商和应用程序块。我仍在努力弄清楚如何将其拆分为多个入口点，以根据需要下载块。 - Ghan

Answer 1

回答你的第一个问题：是的。你绝对可以使用ES6模块并异步加载它们，但必须在需要代码的任何时候使用`require()`函数，而不是像通常一样将导入放在模块顶部。

另外请注意，如果你正在使用`export default`并且使用babel 6，你必须使用`Module.default`调用模块（Babel 5将`Module`本身作为默认导出的快捷方式处理，但新行为更加直接。在这里查看更多信息。

似乎有三个潜在的因素：

1. 入口点 2. 分块 3. 异步加载

你可以设置单独的入口点，并在html中单独包含生成的构建文件。但你也可以基于其他条件（例如滚动到特定位置、存在某些类/ID）使用异步加载。

这段文字的意思是：在Pete Hunt's how-to的底部有一个简明指南，比官方的webpack文档更容易理解。Jonathan Creamer在他的高级Webpack系列文章的两个部分中也有一个很好的演示。

- Damon

---

到目前为止，这是最好的答案。链接很棒，谢谢Damon！ - Ghan

谢谢！我马上要尝试自己实现这个（虽然它一直被降低优先级…），如果遇到问题，我会在这里记录它们。 - Damon

Answer 2

ES6 模块是通过增加特殊语法来实现的，这种语法在 JavaScript 中不能像 webpack 扩展 AMD/CommonJS 的 require 一样容易地进行扩展。

但是，您可以使用 CommonsChunkPlugin 来外部指定代码拆分的块。但是，您需要手动包含这些块。

文档示例：

将您的代码拆分为供应商和应用程序。

entry: {
  vendor: ["jquery", "other-lib"],
  app: "./entry"
}
new CommonsChunkPlugin({
  name: "vendor",

  // filename: "vendor.js"
  // (Give the chunk a different name)

  minChunks: Infinity,
  // (with more entries, this ensures that no other module
  //  goes into the vendor chunk)
})
<script src="vendor.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>

- lorefnon