webpack 性能优化

目的：1、优化开发体验 2、优化输出质量

1、优化开发体验

提升效率
优化构建速度
优化使⽤体验

2、优化输出质量

优化要发布到线上的代码，减少⽤户能感知到的加载时间
提升代码性能，性能好，执⾏就快

01 缩小处理文件的范围 loader

test include exclude三个配置项来缩⼩loader的处理范围

02 resolve.modules配置

指明第三方模块安装的路径，指定node_modules的位置

03 优化resolve.alias配置

置通过别名来将原导⼊路径映射成⼀个新的导⼊路径，避免查找路径的耗时

04 resolve.extensions配置

在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。

extensions:['.js','.json','.jsx','.ts']

后缀尝试列表尽量的⼩
导⼊语句尽量的带上后缀。

05 使⽤externals优化cdn静态资源

使⽤时，仍然可以通过 import 的⽅式去引⽤(如 import $ from 'jquery' )，并且希望webpack 不会对其进⾏打包，此时就可以配置 externals 。

06 使⽤静态资源路径publicPath(CDN)

##webpack.config.js
output:{
 publicPath: '//cdnURL.com', //指定存放JS⽂件的CDN地址
}

07 MiniCssExtractPlugin 完成抽离css

08 html-webpack-plugin 压缩html

09 development vs Production模式区分打包

npm install webpack-merge -D

const merge = require("webpack-merge")
const commonConfig = require("./webpack.common.js")
const devConfig = {
 ...
}
module.exports = merge(commonConfig,devConfig)
//package.js
"scripts":{
 "dev":"webpack-dev-server --config ./build/webpack.dev.js",
 "build":"webpack --config ./build/webpack.prod.js"
}

10 tree Shaking

Dead Code ⼀般具有以下⼏个特征

代码不会被执⾏，不可到达
代码执⾏的结果不会被⽤到
代码只会影响死变量（只写不读）
Js tree shaking只⽀持ES module的引⼊⽅式！！！！

npm i glob-all purify-css purifycss-webpack --save-dev

develpoment的tree shaking是不⽣效的

11 代码分割 code Splitting

optimization:{
 //帮我们⾃动做代码分割
 splitChunks:{
 chunks:"all",//默认是⽀持异步，我们使⽤all
 } 
 },

12 使⽤⼯具量化

speed-measure-webpack-plugin:可以测量各个插件和 loader 所花费的时间
webpack-bundle-analyzer:分析webpack打包后的模块依赖关系

13 HardSourceWebpackPlugin ，打包第三⽅类库优化构建性能

提供中间缓存的作⽤
⾸次构建没有太⼤的变化
第⼆次构建时间就会有较⼤的节省

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const plugins = [
 new HardSourceWebpackPlugin()
]

14 使⽤happypack并发执⾏任务

运⾏在 Node.之上的Webpack是单线程模型的，也就是说Webpack需要⼀个⼀个地处理任务，不能同时处理多个任务。 Happy Pack 就能让Webpack将任务分解给多个⼦进程去并发执⾏，⼦进程处理完后再将结果发送给主进程。从⽽发挥多核 CPU 电脑的威⼒。
共享进程功能慎用：项目较少的时候，开启happyPack和多线程都是需要时间的，有时候你会发现你构建的时间反而增加了