我正在建立一个开始变得非常大的网络应用程序(反应用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版本。)
我的问题:
答案 0 :(得分:2)
回答您的第一个问题:是。您绝对可以使用ES6模块并仍然异步加载它们,但您必须在需要代码的任何时候使用require()
函数,而不是像往常一样将导入放在模块的顶部。
另请注意,如果您使用export default
并使用babel 6,则必须使用Module.default
调用模块(Babel 5将Module
本身视为默认导出为捷径,但新行为更直接。More info here
似乎有3种潜在成分:
您可以设置单独的入口点,并在html中单独包含生成的构建。但是你也可以使用基于其他东西的异步加载(例如滚动到某一点,存在某些类/ ID)。
Pete Hunt's how-to底部有一个简明扼要的指南,比官方的webpack文档更容易理解。
Jonathan Creamer在Advanced Webpack系列帖子的两个部分也有很棒的演练。
答案 1 :(得分:1)
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>