webpack优化

时间:2023-12-13 17:02:38

注:总结自吴浩麟---《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分析出依赖关系