转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://wanago.io/2018/08/13/webpack-4-course-part-seven-decreasing-the-bundle-size-with-tree-shaking/
在本系列的第一篇文章中,我们讨论了导入(import)和导出(export)。这次我们深入介绍动态导入(dynamic import),它值得专门用一篇文章来介绍。我们会介绍动态导入是什么以及如何使用它们。开始吧!
在过去,ECMAScript模块是完全静态的。你必须在运行代码之前指明想要导入和导出的东西。随着动态导入提案的出现,我们有了额外的选择,即动态地导入模块。现在它进行到了TC39流程的第三个阶段。有了它,你就可以添加动态导入模块了。使用它时,你可能会根据用户及其操作行为的做相应处理。比如,你有一个单页应用,只有当用户决定打开它的子页面时才加载特定代码。这样可以大幅节省应用的初始加载时间。
使用动态导入
动态导入操作符是作为函数使用的。它接受一个字符串参数,返回一个Promise。当模块加载好后,这个Promise被resolve。
如果你想了解更多关于Promise的内容,可查看以实现一个排序算法为例解释Promise和回调函数。
document.addEventListener("DOMContentLoaded", () => {
const button = document.querySelector('#divideButton');
button.addEventListener('click', () => {
import('./utilities/divide')
.then(divideModule => {
console.log(divideModule.divide(6, 3)); // 2
})
});
});
在浏览器的开发者工具,如果打开Network标签,你可以看到,模块开始下载的发生在点击按钮之后,而不是在此之前。值得注意的是,如果再次点击按钮,包含了拆分后的模块文件不会再次被下载。
在Webpack中使用动态导入,会新增一个chunk,我们视作异步chunk。
异步chunk在教程的第四部分-使用SplitChunksPlugin分离代码中有介绍。
像这样的chunk会被打包进单独的文件。当使用表达式创建指向其文件的路径时,你需要小心。考虑如下例子:
let fileName = '';
document.addEventListener("DOMContentLoaded", () => {
const button = document.querySelector('#divideButton');
fileName = 'divide';
button.addEventListener('click', () => {
import(`./utilities/${fileName}`)
.then(divideModule => {
console.log(divideModule.divide(6, 3)); // 2
})
});
});
以上代码在你的项目中被打包过后,你会发现Webpack在utilities文件夹下为每个模块单独创建了异步chunk。这是因为Webpack不能在编译时知道哪些模块需要被导入。
你还需要知道像import(pathToFile)这样的完全的动态声明是不起作用的,因为Webpack至少需要一部分文件路径信息。这是因为pathToFile可以是你工程中任何文件的路径,而Webpack会为每个模块在给定的文件夹中创建异步chunk。你可以自定义此行为,我们下面就会这么做。
使用在Webpack中使用魔法注释
导入模块的规范不允许你在导入时使用除了文件名以外的参数。幸运的是,有了Webpack,你可以利用所谓的**魔法注释(magic comments)**来使用附加参数。
webpackInclude 和 webpackExclude
在之前的小节,我们提到Webpack会为每个模块在我们给定的文件夹中创建异步chunk。虽然这是默认行为,但它可以修改。
其中一种方法是使用webpackExclude,它是一个正则表达式,用以匹配潜在的可被导入的文件。任何匹配到的文件都不会被打包进来。
import(
`./utilities/${fileName}`
/* webpackExclude: /subtract.js$/ */
)
以上代码表示,文件 subtract.js 文件不会被打包进来,即使它在 utilities 目录下。
与之相反的一个参数叫做webpackInclude。使用它时,只有匹配了正则表达式的模块会被打包。
webpackMode
webpackMode属性定义了resolve动态模块时的模式。支持以下模式:
lazy
这是默认模式。它为每个动态导入的模块创建异步chunk。
lazy-once
使用它,会为满足导入条件的所有模块创建单一的异步chunk。
import(
`./utilities/${fileName}`
/* webpackMode: "lazy-once" */
)
.then(divideModule => {
console.log(divideModule.divide(6, 3)); // 2
})
以上代码表示,Webpack会为所有 utilities 目录下的所有模块共同创建一个异步chunk。它会导致用户以一个文件下载所有的模块。
eager
此模式会阻止Webpack生成额外的chunk。所有导入的模块被包含在当前chunk,所以不需要再发额外的网络请求。它仍然返回一个Promise,但它被自动resolve。使用eager模式的动态导入与静态导入的区别在于,整个模块只有当**import()**掉用之后才执行。
weak
彻底阻止额外的网络请求。只有当该模块已在其他地方被加载过了之后,Promise才被resolve,否则直接被reject。
webpackChunkName
它是新chunk的名字,可以和[index]、[request]变量一起使用。
[index]在当前动态导入声明中表示文件的索引。另一方面,[request]表示导入文件的动态部分。
import(
`./utilities/${fileName}`
/* webpackChunkName: "utilities-[index]-[request]" */
)
以上代码可能生成例如 utilities-0-divide.js 这样的文件名。
请注意,如果在某些情况下,确定只有一个异步chunk(比如本来就没有动态生成路径,或者使用了lazy-once模式),[index]和[request]就不会被使用了。
使用预先拉取和预先加载提升性能
Webpack 4.6.0为我们提供了预先拉取(prefetching)和预先加载(preloading)的功能。使用这些声明可以修改浏览器处理异步chunk的方式。
预先拉取
使用预先拉取,你表示该模块可能以后会用到。浏览器会在空闲时间下载该模块,且下载是发生在父级chunk加载完成之后。
import(
`./utilities/divide`
/* webpackPrefetch: true */
/* webpackChunkName: "utilities" */
)
以上的导入会让<link rel="prefetch" as="script" href="utilities.js">被添加至页面的头部。因此浏览器会在空闲时间预先拉取该文件。
预先加载
在资源上添加预先加载的注释,你指明该模块需要立即被使用。异步chunk会和父级chunk并行加载。如果父级chunk先下载好,页面就已可显示了,同时等待异步chunk的下载。这能大幅提升性能。
import(
`./utilities/divide`
/* webpackPreload: true */
/* webpackChunkName: "utilities" */
)
以上代码的效果是让<link rel="preload" as="script" href="utilities.js">起作用。不当地使用wepbackPreload会损害性能,所以使用的时候要小心。
总结
这次我们学习了如何使用动态导入提升应用的性能。它们能显著减少页面的初次加载时间。使用可传入Webpack的额外参数,你可以更进一步地定制它,并且添加上对预先拉取和预先加载的支持。所有这些,都会优化你的用户体验,让你的网站更加灵动。