携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

webpack优化

使用webpack打包躲不开的就是webpack优化这个话题，无论是面试还是实际开发，优化都是非常重要的事情，毕竟提升用户体验是我们前端工程师的职责

基于打包的优化，不过就是围绕着构建时间优化、打包体积优化、用户体验优化这几方面下手，本文将逐一展开。

找到问题

在优化之前，首先要知道这个优化有没有必要，这少不了先分析原本项目已有的问题。

这时可以利用speed-measure-webpack-plugin、webpack-bundle-analyzer插件进行项目打包性能的分析。

speed-measure-webpack-plugin用于分析打包速度，用法很简单，这里大概贴下代码

//安装插件speed-measure-webpack-plugin
npm install --save-dev speed-measure-webpack-plugin

//引入插件、创建插件对象
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); //引入插件
const smp = new SpeedMeasurePlugin(); //创建插件对象

//使用插件的wrap()方法将配置包起来
module.exports = smp.wrap({
  entry: {
    .....
  }, 
  output: {
    .....
  },
  .....
});

webpack-bundle-analyzer用于体积分析，用法很简单，这里也贴下代码

//安装插件webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
复制代码

//引入插件、创建插件对象
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
复制代码

//添加plugpins配置
plugins: [
  new BundleAnalyzerPlugin()
],

接下来我们基于上面的数据分析，继续去优化我们的项目。

构建时间优化

thread-loader

多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader

cache-loader

缓存资源，提高二次构建的速度，使用方法是将cache-loader放在比较费时间的loader之前，比如babel-loader

开启热更新

比如你修改了项目中某一个文件，会导致整个项目刷新，这非常耗时间。如果只刷新修改的这个模块，其他保持原状，那将大大提高修改代码的重新构建时间。

构建区分环境

区分环境去构建是非常重要的，我们要明确知道，开发环境时我们需要哪些配置，不需要哪些配置；而最终打包生产环境时又需要哪些配置，不需要哪些配置：

开发环境：去除代码压缩、gzip、体积分析等优化的配置，大大提高构建速度
生产环境：需要代码压缩、gzip、体积分析等优化的配置，大大降低最终项目打包体积

打包体积优化

图片压缩

项目中的图片会占到整个项目不少体积，对图片的优化非常必要。

这里要区分是import进项目的还是直接在html上写的src图片

如果是import的图片

`import/require`到`.js`或`.html`中`require(图片路径)`的图

// `file-loader` + `image-webpack-loader`

rules: [{
  test: /.png$/i, // 以png为例
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        pngquant: {
          quality: [0.65, 0.90] // 设置png的品质区间
        },
      }
    },
  ],
}]

如果是html的图片


// 图片多在同一目录
// `CopyPlugin`在编译时，从源目录`src`复制到发布目录`dist`

npm i imagemin-webpack-plugin -D

对css压缩

CSS代码压缩使用css-minimizer-webpack-plugin，效果包括压缩、去重

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在webpack.prod.js中配置

// 安装插件css-minimizer-webpack-plugin
npm i css-minimizer-webpack-plugin -D

// 添加配置
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 去重压缩css
    ],
  }

tree-shaking

tree-shaking简单说作用就是：只打包用到的代码，没用到的代码不打包，而webpack5默认开启tree-shaking，当打包的mode为production时，自动开启tree-shaking进行优化

module.exports = {
  mode: 'production'
}

用户体验优化

gzip压缩

web前端项目，静态资源放在cdn上比较多，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。参考加速nginx: 开启gzip和缓存，nginx的gzip配置非常简单，在你对应的域名底下，添加下面的配置，重启服务即可。gzip_comp_level的值大于2的时候并不明显，建议设置在1或者2之间。

打包优化

webpack优化

找到问题

构建时间优化

打包体积优化

用户体验优化