Webpack 4教程 - 第八部分 使用prefetch和preload进行动态加载

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：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的额外参数，你可以更进一步地定制它，并且添加上对预先拉取和预先加载的支持。所有这些，都会优化你的用户体验，让你的网站更加灵动。