综合技术

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

微信扫一扫,分享到朋友圈

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

转载请注明出处: 葡萄城官网
,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

原文出处: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
的额外参数,你可以更进一步地定制它,并且添加上对预先拉取和预先加载的支持。所有这些,都会优化你的用户体验,让你的网站更加灵动。

阅读原文...


Avatar

My FBMP application can not load suddenly

上一篇

10亿的跑男、6亿的新说唱,电视台PK视频平台的招商战事

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Webpack 4教程 – 第八部分 使用prefetch和preload进行动态加载

长按储存图像,分享给朋友