在 es6 中使用 webpack 的分块

Question

我正在构建一个开始变得相当大的网络应用程序（用 es6 编写的 React 应用程序）。结果，我发现我的 JS 文件在移动设备上的下载时间长得令人无法接受。我正在尝试将大型 JS 应用程序分块为按需加载的块。我正在使用 webpack，并阅读了这篇文章：

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

使用本文，我将我的代码拆分为 app.js 和 vendor.js，其中 vendor.js 包含所有第三方 modules/plugins。

我想更进一步，将 app.js 文件分解成几个入口点，然后根据需要下载块。上面的文章描述了如何使用 CommonJS 或 AMD 来做到这一点。但是，我使用的是 ES6 的本机模块而不是这两个选项，并且找不到为每个文件定义依赖项的语法（基本上是 .ensure() 的 ES6 版本）。

我的问题：

我可以使用 ES6 模块利用 webpack 的按需分块功能，还是需要使用 AMD 或 CommonJS 来实现？
如果我需要使用 AMD/CommonJS，如何避免重构整个应用程序？
我需要做什么来确保异步加载依赖项？
有没有人有 link 到 tutorial/guide/code 的例子来帮助说明我的需要？

Answer 1

ES6 模块是通过使用特殊语法扩充 JS 来实现的，这种语法不能像 webpack 扩展 AMD/CommonJS.

那样在 javascript 中轻松扩展

但是，您可以使用 CommonsChunkPlugin 来外部指定块以进行代码拆分。不过，您必须手动包含这些块。

文档中的示例：

Split your code into vendor and application.

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>

Answer 2

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

另外请记住，如果您使用 export default 并使用 babel 6，则必须使用 Module.default 调用模块（Babel 5 将 Module 本身视为默认值导出为快捷方式，但新行为更直接。More info here

似乎有 3 种潜在成分：

入口点
分块
异步加载

您可以设置单独的入口点，并将生成的构建单独包含在您的 html 中。但是你也可以使用基于其他东西的异步加载（比如滚动到某个点，存在某个classes/IDs）。

在 Pete Hunt's how-to 的底部有一个简明的指南，比官方的 webpack 文档更容易理解。

乔纳森·克里默 (Jonathan Creamer) 在他的 Advanced Webpack 系列帖子的两个部分中也有很好的演练。

在 es6 中使用 webpack 的分块

using webpack's chunking with es6

javascript

asynchronous

ecmascript-6

webpack