Webpack性能优化

这篇是B站公开课的部分笔记，关于性能优化，老师讲得不太多但是很精炼。

对性能的评估一般从体积和编译速度两个方面出发，Webpack性能优化也可以从打包结果优化和构建过程优化两个维度来入手。

1. 使用TerserPlugin

terser是uglify-es的一个分支，保留了与uglify-es 和 uglify-js@3 的 API 和 CLI 兼容性。

在Webpack.config.js中配置，

const TerserPlugin = require('terser-webpack-plugin')


module.exports = {
	optimization: {
    minimizer: [new TerserPlugin({
        //加快构建速度
        cache:true, 
        //开启多线程提升速度
        parallel: true,
        terserOptions :{
        compress: {
        	unused:true,
            drop_debugger:true,
            drop_console:true,
            dead_code:true,  
        }
        }
      })]
  },
    }

2. 善用webpack-bundle-analyzer

将打包结果可视化，从体积大的部分着手优化。

在webpack.config.js中配置，

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin


module.exports = {
  plugins: [
      new BundleAnalyzerPlugin()
  ],
};

3. 优化解析 减少查找

在webpack.config.js module中配置noParse，避免解析echarts jquery node_modules等文件. 要注意避开的文件中不应该包含import require define这样模块化的语句，不然构建的代码会包含无法在浏览器环境下执行模块化语句。

module: {
	noParse:/node_modules\/(jquery\.js)/,
}
	rules: [
    	{
        exclude: /node_modules/,
        }
    ]

4. HappPack 和 thread-loader

HappyPack是多进程模型，可以加速代码的构建。可把任务分成很多子线程。webpack运行在nodejs上，nodejs是单线程。通过HappPack让node支持多个线程同时打包。但如果项目比较简单就没必要用这个方式。简单项目使用多线程打包浪费更多CPU资源。

有些loader不支持HappPack，配置前可以确认一下。比如url-loader、 file-loader不支持。

安装 npm i happypack

const HappyPack = require('happypack');
//根据CPU数量创建线程池
const happyThreadPool = HappyPack.ThreadPool({ size: OscillatorNode.cpus().length });



plugins: [
    new HappyPack({
        //用id来标识 happypack处理哪类文件
      id: 'jsx',
      //共享进程池
      threadPool: happyThreadPool,
      loaders: ['babel-loader'],
      //允许 HappyPack 输出日志
      verbose: true,
    })
  ]

thread-loader 针对loader进行优化，会把loader放进woker线程池，必须在配置项里放到所有loader之前。比如：

module: {
	noParse:/node_modules\/(jquery\.js)/,
}
	rules: [
    	{
         test: /\.js$/,
         include:path.resolve('src'),
         use:[
             //thread-loader要放到最前面
         	'thread-loader',
            
         ]
        }
    ]

5. 更新版本

每一个版本的更新，webpack 内部肯定会做很多优化，webpack 是依赖 Nodejs 运行，升级对应的版本，webpack 的速度也能够获得提升。

我在学习的时候使用的是最新版本的webpack5，但新版本也会存在一些问题，主要是和其他插件或依赖的版本兼容。这类问题在面向Google编程之后，最好的指引其实还是去Github issue里搜索，往往能够解决你的问题。

参考文章：

www.jianshu.com/p/b9bf995f3…

zhuanlan.zhihu.com/p/139498741

公开课地址 webpack

如果你已经看到了这里，要不要考虑加入我们的前端交流群哇，每周一次线上交流茶话会，大家一起聊技术&聊生活 (๑•̀ㅂ•́)و✧

感兴趣的同学可以DM我哦