Webpack项目优化实战：一文搞定打包体积优化

目录：
前言
1、删除多余包/模块
2、antd按需加载
3、使用图片压缩

---

前言：之前使用React + antd-mobile写的项目已经打包上线，目前打算对其进行一系列的优化，那么首当其冲的就是Webpack相关的优化。关于Webpack的优化主要集中在两点：
1）打包体积的优化，最主要的环节之一，直接影响项目页面的加载速度
2）打包速度的优化，主要影响开发效能的环节
本篇文章负责记录我使用Webpack在打包体积优化方面做的所有工作和成果。

在正式优化前，先得分析项目优化前的打包体积，以及各个部分占体积的多少
这里借助 webpack-bundle-analyzer 插件，它可以分析打包的总体积、各个组件的体积以及引入的第三方依赖的体积。

yarn add webpack-bundle-analyzer -D

这样就可以在http://127.0.0.1:8888看到各部分占体积的多少

从上图可以看出来antd-mobile、react-dom 还有chunk.js等都是占据体积非常大的模块，也是我们本次优化的重点关照对象。

本次优化前打包体积大小为：4.72M，那么开始优化。

---

1、删除冗余包和模块
运行项目时，可以通过浏览器调试的warning看到项目中引入，但没有使用的模块、包或变量，这些都是可以删除来优化打包体积的，这作为优化的第一步：

---

2、antd按需加载
我们引入antd模块，默认是全部引入的，但是实际使用的只有我们项目中使用的几个模块。我的项目中使用的是antd-mobile，默认情况下会有如下提示：

这就提醒我们引入babel-plugin-import实现antd-mobile的部分模块引入。

npm install babel-plugin-import --save-dev

此外还需要配置项目的.babelrc文件，放入src文件夹

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile",
        "style": "css"
      }
    ]
  ]
}

按需引入antd后打包体积优化明显，从4.72M ~ 4.16M

---

3、图片压缩
图片占据很大的体积，在打包时进行图片压缩能有效减少打包体积。
这里使用 image-minimizer-webpack-plugin 配合 imagemin 可以在打包时实现图片的压缩。

npm install image-minimizer-webpack-plugin imagemin imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

或者简单的引入image-webpack-loader进行全部图片的匹配压缩
npm install image-webpack-loader -D
需要在Webpack.config.js中进行相关配置：

// install
npm i image-webpack-loader -D
// vue.config.js
chainWebpack: (config) => {
    if (isProd) {
        // 图片压缩处理
        const imgRule = config.module.rule('images')
        imgRule
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
    }
}

---

4、图片转 Webp
Webp图片有着体积小，分辨率高的特点，可以通过imagemin-webpack-plugin插件实现打包过程中图片的转化。

引入模块
const ImageminWebP = require('imagemin-webp')
const ImageminPlugin = require('imagemin-webpack-plugin').default
const CopyWebpackPlugin = require('copy-webpack-plugin')

插件部分
 plugins: [
      // 打包体积
      new BundleAnalyzerPlugin(),
      // 图片转webp
      new CopyWebpackPlugin([
        {
          from: '../public/images/**/**',
          to: '../public/images/[name].webp',
        },
      ]),
      new ImageminPlugin({
        // imagemin-webp docs: https://github.com/imagemin/imagemin-webp
        plugins: [ImageminWebP({ quality: 50 })],
      }),

---

经过一系列的优化之后，打包后的体积也达到了 3.92M 的大小，虽然仍不算小，但是比一开始还是有了不少改进，后续还会继续提升！