注：总结自吴浩麟---《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分析出依赖关系
原文地址：https://www.cnblogs.com/dll-ft/p/10789548.html