webpack 性能优化

[AndreGeng]

webpack 输出打包时间信息

webpack --colors --profile --display-modules

--colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤 --profile 输出性能数据，可以看到每一步的耗时 --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

1. 设置resolve.modules:[path.resolve(__dirname, 'node_modules')]避免层层查找 resolve.modules告诉webpack去哪些目录下寻找第三方模块，默认值为['node_modules']，会依次查找./node_modules、../node_modules、../../node_modules。
2. 设置resolve.mainFields:['main']，设置尽量少的值可以减少入口文件的搜索步骤 第三方模块为了适应不同的使用环境，会定义多个入口文件，mainFields定义使用第三方模块的哪个入口文件，由于大多数第三方模块都使用main字段描述入口文件的位置，所以可以设置单独一个main值，减少搜索
3. resolve.alias
4. module.noParse
5. 配置loader时，通过test、exclude、include缩小搜索范围
6. 使用DllPlugin减少基础模块编译次数
7. 使用HappyPack开启多进程Loader转换
8. 使用ParallelUglifyPlugin开启多进程压缩JS文件

reference: webpack性能优化