使用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()在需要代码的任何时候使用该函数，而不是像平常一样将导入放在模块的顶部。

另请记住，如果您正在使用export defaultbabel 6，则必须使用调用该模块Module.default（Babel 5 将其Module自身视为默认导出作为快捷方式，但新行为更加直接。更多信息请参见此处

似乎有 3 个潜在成分：

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

您可以设置单独的入口点，然后将生成的构建单独包含在 html 中。但您也可以根据其他情况使用异步加载（例如滚动到某个点、某些类/ID 的存在）。

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

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