JavaScript 经典实例：第三版

编写

Web

应用

｜

417

"sideEffects": [

"./src/file-with-side-effect.js"

]

最后，我们可以让

Webpack

对

JavaScript

模块开启惰性加载，只在浏览器交互需要

时加载。这个功能通过动态

import

语句实现，简单易用。假设

src

目录中有一个名

为

button.js

的文件，我们可以指定在用户点击一个按钮时加载该文件的内容。

index.

js

文件的内容如下所示。

const

buttonElement = document.getElementById('button');

buttonElement.onclick = e =>

import

(/* webpackChunkName: "button" */ './button').then(module => {

const

button = module.

default

;

button();

});

16.2.3

讨论

没有

JavaScript

代码时速度最快。然而，现代

Web

应用的交互功能多多少少都要用

到客户端

JavaScript

。鉴于此，我们的目标是限制用户的浏览器下载的

JavaScript

文

件的大小。借助简化、代码分拆、摇树优化和惰性加载等策略，我们可以深度控制

用户浏览器加载的

JavaScript

量和大小。

16.2.4

参考

Webpack

的上手指南（

https://oreil.ly/TAnYG

）对代码打包和

Webpack

配置文件做了

很好的介绍。

16.3

编写渐进式

Web

应用

16.3.1 ...