webpack5高级优化——减少代码体积

Posted 2022-12-16 天界程序员

减少代码体积可用使得我们的项目在浏览器加载的时间更快，用户体验也更好。

1. treeShaking

MDN:

Tree shaking 是一个通常用于描述移除 javascript 上下文中的未引用代码 (dead-code) 行为的术语。

它依赖于 ES2015 中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

在现代 JavaScript 应用程序中，我们使用模块打包 (如webpack或Rollup) 将多个 JavaScript 文件打包为单个文件时自动删除未引用的代码。这对于准备预备发布代码的工作非常重要，这样可以使最终文件具有简洁的结构和最小化大小。

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

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

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

案例说明：

文件名：src/math.js

export function square(x) 
  return x * x;


export function cube(x) 
  return x * x * x;

这里有两个函数一个是计算数的平方，一个是计算数的立方，它们都使用export语句导出了。

当我们只需要使用平方的这个函数的时候，我们使用import语法将它单独引入即可：

文件名：src/main.js

import square from './math'

console.log(square(6)) // 36

这个时候webpack的生产模式是默认开启treeShaking功能的，我们只需要执行打包命令即可

npm run build

观察dist目录下的bundle文件，并没有立方的函数代码。

在开发模式我们没有必要去开启这个功能，当然如果你感兴趣可以参考：webpack5-treeShaking文档

---

2. Babel

Babel文档

Babel为常见函数(如_extend)使用非常小的帮助程序。默认情况下，它将被添加到每个需要它的文件中。这种复制有时是不必要的，特别是当应用程序分布在多个文件中时。

这就是@babel/plugin-transform-runtime插件出现的地方:所有的helper都将引用@babel/runtime模块，以避免在编译输出中重复。运行时将被编译到您的构建中。

此转换器的另一个目的是为代码创建沙盒环境。如果你直接导入core-js或@babel/polyfill和它提供的内置程序，如Promise, Set和Map，这些将会污染全局作用域。虽然这对于应用程序或命令行工具来说是可以的，但如果你的代码是一个库，你打算发布给其他人使用，或者如果你不能准确地控制代码运行的环境，这就会成为一个问题。

转换器会将这些内置组件别名为core-js，这样你就可以无缝地使用它们，而不必需要polyfill。

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

• 安装依赖

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

• 配置插件

该插件需要在babel的loader中进行配置：

  loader: "babel-loader",
  options: 
    cacheDirectory: true, // 开启babel编译缓存
    cacheCompression: false, // 缓存文件不要压缩
    plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
  ,
,

---

3. ImageMinimizerWebpackPlugin

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

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

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

• 安装依赖

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

还有剩下包需要下载，有两种模式（关于以下插件安装是一言难尽，成功渺茫）

1、无损压缩：

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

2、有损压缩:

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

具体区别可以参考：有损与无损的区别-百度百科

• 配置

如果你安装成功可以进行以下配置

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
// ...
optimization: 
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      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",
                      ,
                    ,
                  ],
                ,
              ],
            ],
          ,
        ,
      ),
    ],
  ,

1. 打包时可能会出现报错：

Error: Error with 'src\\images\\1.jpeg': '"C:\\Users\\86176\\Desktop\\webpack\\webpack_code\\node_modules\\jpegtran-bin\\vendor\\jpegtran.exe"'
Error with 'src\\images\\3.gif': spawn C:\\Users\\86176\\Desktop\\webpack\\webpack_code\\node_modules\\optipng-bin\\vendor\\optipng.exe ENOENT

我们需要安装两个文件到 node_modules 中才能解决

• jpegtran.exe

需要复制到 node_modules\\jpegtran-bin\\vendor 下面

jpegtran 官网地址

• optipng.exe

需要复制到 node_modules\\optipng-bin\\vendor 下面

OptiPNG 官网地址