javascript - 在 es6 中使用 webpack 的分块

Question

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

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

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

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

我的问题:

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

Answer 1

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

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

似乎有 3 种潜在成分:

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

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

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

Jonathan Creamer 在他的 Advanced Webpack 的两个部分中也有很好的演练。系列帖子。