webpack优化

Posted 2021-11-02 dll-ft

注：总结自吴浩麟---《webpack深入浅出》第四章--优化

 

1.缩小文件的搜索范围

1.1 优化loader:module.rules中，使用test,include,exclude尽量准确地命中文件（夹）

1.2 优化resolve.extensions:后缀列表要尽可能小；频率高的文件后缀要放在前面；写代码时尽量带上后缀，可以避免寻找过程

1.3 优化module.noParse:让webpack忽略对jquery，chartJs等没采用模块化的文件的递归处理，提高构建性能

 

2.使用DllPlugin

原理：给web项目的构建接入动态链接库；包含了大量复用模块的动态链接库只需被编译一次，在之后的构建过程中，被动态链接库包含的模块将不会重新编译。

插件：webpack内置了对dll的支持，有两个内置插件：DllPlugin(用于打包出一个个dll文件),DllReferencePlugin（用于在配置文件中引入dll文件）

 

3.使用HappyPack

原理：将任务分解给多个子进程，并发执行，子进程处理完成后再将结果发生给主进程

 

4.使用ParallelUglifyPlugin

原理：开启多个子进程压缩代码

ParallelUglifyPlugin内置了UglifyJS和UglifyES，支持并行压缩ES6代码

 

5.使用自动刷新

webpack官方提供两大模块：webpack和webpack-dev-server

5.1 文件监听

文件监听是webpack提供的

前提webpack.config.js中开启watch:true;用watchOptions进行配置

watchOptions: {
  ignored: /node_modules/,
  // 监听到变化后等300ms，300ms内不在变化 再去执行动作
  aggregateTimeout: 300,
  // 每秒询问1000次
  poll: 1000
}

原理：定时获取某个文件的最后编辑时间并保存，如果发现当前获取的和上一次获取的最后编辑时间不一致，就认为该文件发生了变化；当发现某个文件变化是，并不会立刻告诉监听者，而是先缓存起来，等待一段时间（默认300ms，节流）如果不再继续变化，就一次性告诉监听者。

如何监听文件列表：从入口文件出发，递归解析出依赖文件，将这些依赖文件都加入监听列表中

优化：watchOptions.aggregateTimeout尽量大，watchOptions.poll尽量小；但会降低监听的灵敏度

5.2 自动刷新浏览器

webpack-dev-server负责刷新浏览器

原理：向开发网页代码中注入代理客户端代码，代理客户端向DevServer发起websocket连接

 

6.开启模块热替换

除了5中提到的刷新整个页面，devServer还支持模块热替换

优点：反应更快，等待时间更短；能保留当前网页的运行状态

开启命令：webpack-dev-server --hot

原理：插入代理客户端代码（多出了用于模块热替换的文件，比自动刷新的代理客户端代码更大），重新生成用于替换老模块的补丁文件

 

7.cdn加速

内容分发网络，将资源部署到各处，用户访问时获取最近节点的资源

 

8.tree-shaking

剔除用不上的死代码

前提：依赖于ES6模块化语法，可以让webpack简单分析出哪些export的代码被import了

 

9.CommonsChunkPlugin提取公共代码

 

10.分割多个chunk以按需加载

 

11.使用prepack

比较激进的做法：在编译阶段预先执行代码，得到执行结果，将结果输出以提升性能

 

12.开启Scope Hoisting(作用域提升)

原理：分析模块间的依赖关系，尽可能将打散的模块合并到一个函数中

前提：依赖于ES6模块化语法，可以让webpack分析出依赖关系