使用webpack与es6分块
我正在构建一个开始变得相当大的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模块，并且仍然可以异步加载它们，但是你必须使用require()函数来代替你需要的代码，而不是像正常情况那样将导入放在模块的顶部。
另外请记住，如果您使用的是export default和使用babel 6，则必须使用Module.default调用该模块（Babel 5将Module本身作为默认导出视为捷径，但新行为更直接。更多信息在这里
似乎有3个潜在的成分：
您可以设置单独的入口点，并将生成的构建单独包含在HTML中。 但是，您也可以使用基于其他事物的异步加载（例如滚动到某个点，存在某些类/ ID）。
在Pete Hunt的操作指南的底部有一个简洁的指南，这比官方的webpack文档更容易理解。
Jonathan Creamer在他的Advanced Webpack系列文章的两个部分中也有很好的演练。
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>