Webpack5优化之减少代码体积

一、Tree Shaking

1.1 为什么

开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。

如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。

这样将整个库都打包进来，体积就太大了。

1.2 是什么

Tree Shaking是一个术语，通常用于描述移除JavaScript中的没有使用上的代码。

注意：它依赖ES Module

1.3 怎么用

Webpack5 已经默认开启了这个功能，无需其他配置

二、Babel

2.1 为什么

Babel为编译的每个文件都插入了辅助代码，使代码体积过大！

Babel对一些公共方法使用了非常小的辅助代码，比如_extend，默认情况下会被添加到每一个需要它的文件中。

我们可以将这些辅助代码作为一个独立模块，来避免重复引入。

2.2 是什么

@babel/plugin-transform-runtime: 禁用了Babel自动对每个文件的runtime注入，而是引入@babel/plugin-transform-runtime并且使所有辅助代码从这里引用

2.3 怎么用

2.3.1 安装依赖

npm i @babel/plugin-transform-runtime -D

2.3.2 配置

config/webpack.prod.js中配置插件

{
  test: /\.js$/,
  // exclude: /node_modules/, // 排除node_modules代码不编译
  include: path.resolve(__dirname, '../src'),
  use: [
    {
      loader: 'thread-loader',//开启多进程
      options: {
        workers: threads //数量
      }
    },
    {
      loader: "babel-loader",
      options: {
        cacheDirectory: true,// 开启babel编译缓存
        cacheCompression: false, // 缓存文件不要压缩
        plugins: ['@babel/plugin-transform-runtime']//减少代码体积
      }
    }
  ]
},

三、Image Minimizer

3.1 为什么

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。

我们可以对图片进行压缩，减少图片体积。

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

3.2 是什么

image-minimizer-webpack-plugin: 用来压缩图片的插件

3.3 怎么用

3.3.1 安装依赖

npm i image-minimizer-webpack-plugin imagemin -D

还有剩下包需要下载，有两种模式：

• 无损压缩：对文件本身的压缩，和其它数据文件的压缩一样，是对文件的数据存储方式进行优化，采用某种算法表示重复的数据信息，文件可以完全还原，不会影响文件内容，对于数码图像而言，也就不会使图像细节有任何损失
  • 安装命令 npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
• 有损压缩：对图像本身的改变，在保存图像时保留了较多的亮度信息，而将色相和色纯度的信息和周围的像素进行合并，合并的比例不同，压缩的比例也不同，由于信息量减少了，所以压缩比可以很高，图像质量也会相应的下降
  • 安装命令 npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

备注：如果包下载失败，可以使用cnpm进行下载

3.3.2 配置

以无损压缩配置为例，修改config/webpack.prod.js

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
...
optimization: {
  minimize: true,
  minimizer: [
    // css压缩
    new CssMinimizerPlugin(),
    // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
    new TerserPlugin({
      parallel: threads // 开启多进程
    }),
    // 压缩图片
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminGenerate,
        options: {
          plugins: [
            ["gifsicle", { interlaced: true }],
            ["jpegtran", { progressive: true }],
            ["optipng", { optimizationLevel: 5 }],
            [
              "svgo",
              {
                plugins: [
                  "preset-default",
                  "prefixIds",
                  {
                    name: "sortAttrs",
                    params: {
                      xmlnsOrder: "alphabetical",
                    },
                  },
                ],
              },
            ],
          ],
        },
      },
    }),
  ]
},

3.3.3 测试

执行npm run build，对比dist/images下图片大小。