webpack从入门到原理（高级五）——减少打包代码体积

前言

这一篇主要写了Tree Shaking和babel的runtime注入以及图片压缩,通过这篇文章的操作，能够有效地对打包后代码体积的优化！

Tree Shaking

在开发时我们会定义一些工具函数库或者引用第三方工具函数库或组件库，如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能，这样将整个库都打包进来，体积就太大了，大大拖慢了webpack打包的速度。

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

注意：Webpack 已经默认开启了这个功能，无需其他配置。它依赖 ES Module，如果使用的是CommonJS的话是没法移除没有使用的代码了

Babel

在我们打包带妈的时候，Babel 为编译的每个文件都插入了辅助代码，Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中，会导致代码体积过大！所以我们可以将这些辅助代码作为一个独立模块，来避免重复引入。

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

使用

首先需要安装一个@babel/plugin-transform-runtime插件,然后再babel-loader的配置中使用这个插件就可以了，生产环境和开发环境都可以用。

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

// webpack.prod.js / webpack.dev.js
options:{
    plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
}

配置完成就可以进行打包了，模块越多体积减少的就会越明显！

Image Minimizer

在开发中如果项目引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。因此我们可以对图片进行压缩，减少图片体积。

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

使用

进行图片压缩需要用到以下插件，需要进行安装：

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

注意 : 安装这些包时需要安装依赖包，其中部分依赖包需要从GitHub上下载，而GitHub的资源库DNS有问题，导致这些依赖包无法安装而报错。这个时候可以多尝试几次安装，也可以直接在下载命令后面加上--ignore-scripts这样可以直接忽略scripts相关依赖。

下载完成之后进行配置：

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

// 压缩图片
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",
              },
            },
          ],
        },
      ],
    ],
  },
},
}),

配置完成之后运行打包代码会报错:在node_modules没有找到对图片压缩的程序。所以需要进行安装jpegtran.exe然后复制到 node_modules\jpegtran-bin\vendor 下面。下载链接官网链接,推荐这个链接下载会更方便一些链接

也有可能报optipng.exe文件找不到的问题,附下载链接, 也可在官网进行下载。

安装完成之后就可以重新进行打包了，成功之后对比如下图，无损格式压缩，压缩后的图片会比原图小一些,文件越大也就会越明显一些！

小结

在代码越来越多，项目越来越大的情况下，通过以上操作能够有效的减小代码打包后的体积,这样同时就减小了网络传输量和带宽占用,减小了服务器的处理的压力,提高了页面的渲染显示的速度!