使用webpack与es6的分块

Question

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

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

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

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

我的问题：

• 我可以利用使用ES6模块的webpack按需分块，还是需要使用AMD或CommonJS来实现这一目标？
• 如果我需要使用AMD / CommonJS，我怎样才能避免整个应用程序的重构？
• 我需要做些什么才能确保异步加载依赖项？
• 有没有人有教程/指南/代码示例的链接来帮助说明我需要什么？

Answer 1

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

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

似乎有3种潜在成分：

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

您可以设置单独的入口点，并在html中单独包含生成的构建。 但是您也可以使用基于其他事物的异步加载（例如滚动到某个点，存在某些类/ ID）。

在Pete Hunt的底层有一个简洁的指南，比官方的webpack文档更容易理解。

Jonathan Creamer在他的Advanced Webpack系列文章的两个部分中也有很棒的演练。

Answer 2

ES6模块是通过使用特殊语法扩充JS来实现的，这种语法不能像webpack扩展所需的AMD / CommonJS那样在javascript中轻松扩展。

但是，您可以使用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>