二、Webpack5 入门到原理（高级优化）

系列文章

一、Webpack5 入门到原理（基础）

1、提升开发体验

1、sourceMap

1、为什么？

为什么要有sourceMap？

因为我们在开发环境用webpack编译生成的代码通常情况下是这个样子的，如果在开发环境下面报错了，我们在定位问题的时候是非常困难的，所以我们就需要一个文件来映射源代码与编译后代码之间的关系。

2、是什么？

sourceMap顾名思义，就是对源代码的一个映射，里面包含了源代码和构建后代码的每一行、每一列的映射关系。当构建后的代码运行报错的时候，就可以通过.map文件，从构建后代码出错的位置找到映射后源代码出错的位置，这样就可以让浏览器提示出源代码出错的位置，帮助我们更快的找到错误的位置。

3、怎么用？

通过查看Webpack DevTool 文档open in new window可知，SourceMap 的值有很多种情况.

但实际开发时我们只需要关注两种情况即可：

• 开发模式：cheap-module-source-map

  • 优点：打包编译速度快，只包含行映射
  • 缺点：没有列映射

module.exports = {
  mode: "development",
  devtool: "cheap-module-source-map",
};

• 生产模式：source-map

  • 优点：包含行/列映射
  • 缺点：打包编译速度更慢

生产模式也有可能不开启sourceMap，会部生成专门的sourceMap文件

module.exports = {
  // 其他省略
  mode: "production",
  devtool: "source-map",
};

2、提升打包构建速度

1、HotModuleReplacement

1、为什么？

在没有使用热模块替换功能的时候，当我们修改了项目中一个模块的代码，webpack就会将所有模块重新编译打包，这样速度回很，还会刷新整个页面。

所以我们就需要一个机制，就是当我们修改了某一模块，只需要重新打包编译当前模块，其他模块不变，这样就能大大提升开发环境编译的速度。

2、是什么？

HotModuleReplacement(HMR/热模块替换)：在程序运行中，替换、添加或删除模块，而不需要重新加载整个页面。

3、怎么用？

css 已经经过 style-loader 处理过了，已经有HMR的功能了，此时 js 还不行。

基本配置

module.exports = {
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
};

js 配置

// 判断是否支持 HMR 功能
if (module.hot) {
  module.hot.accept("./js/count.js", function (count) {
    const result1 = count(2, 1);
    console.log(result1);
  });

  module.hot.accept("./js/sum.js", function (sum) {
    const result2 = sum(1, 2, 3, 4);
    console.log(result2);
  });
}

2、oneOf

1、为什么？

webpack打包时，每个文件都会经过所有的loader处理，就算有test进行匹配，没有进行实际上的处理，但是都需要过一遍，比较慢。

2、是什么？

就是只能匹配上一个loader，剩下的就不进行匹配了。

3、怎么用？

  // 加载器
  module: {
    rules: [
      {
        oneOf: [
          ... 原有的 rule 规则
        ],
      },
    ],
  },

生产环境也这样配置

3、include/exclude

1、为什么？

开发的时候我们安装的第三方库或者插件，都下载到了node_modules中了，这些依赖包在内部已经生成好了编译后的代码了，所以不在需要webpack对其进行编译。所以我们在对 js 文件进行处理的时候，就需要排除这些node_modules下面的依赖包。

2、是什么？

• include 包含，只处理 包含的文件
• exclude 排除，处理 排除文件之外的文件

3、怎么用？

开发环境配置

  {
    test: /\.js$/,
    // exclude: /node_modules/, // 排除 node_modules 下面的代码不进行编译
    include: path.resolve(__dirname, "../src"),
    loader: "babel-loader",
  },
  
  
  plugins: [
    new ESlintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
    })
  ],

生产环境也是同样的配置

3、Cache

1、为什么？

每次打包的时候 js 文件都要经过 eslint 检查和 babel 编译，比较慢。

我们可以缓存之前 eslint 检查和 babel 编译的结果，这样在第二次构建的时候速度就会更快了。

2、是什么？

对 eslint 检查和 babel 编译结果进行缓存。

3、怎么用？

可以观察一下第一次耗时与开启后的耗时

第一次

第二次

还有更多配置参见 babel-loader 文档

4、Thread

1、为什么？

当我们的项目越来越大的时候，打包构建的速度越来越慢的时候，这个时候我们就要想办法提高打包的效率，对于我们来说其实就是提高 js 打包的效率，因为其他的文件数量相对较少。

而处理 js 文件的主要就是 eslint babel Terser 这三个工具，因此我们要提高他们的运行速度。

我们可以采取开启多进程同时处理 js 文件，这样的速度就会比之前的单进程打包更快。

2、是什么？

多进程打包：开启电脑的多个进程同时干一件事情，速度更快。

注意：仅适合在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右的开销。

3、怎么用？

启动的进程数就是我们电脑 cpu 的核心数

const os = require("os");

// 获取 cpu 核数
const threads = os.cpus().length;

安装 thread-loader

yarn add thread-loader

webpack 配置

const TerserPlugin = require("terser-webpack-plugin");

  // babel-loader
  {
    test: /\.js$/,
    exclude: /node_modules/, // 排除 node_modules 下面的代码不进行编译
    use: [
      {
        loader: "thread-loader",
        options: {
          workers: threads,
        },
      },
      {
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          cacheCompression: false,
        },
      },
    ],
  },
  
  // eslint
  new ESlintWebpackPlugin({
    ...
    threads,
  }),
  
  // 压缩
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，如果我们有其他的配置就要在这里进行重写
      new TerserPlugin({
        parallel: threads, // 开启多进程
      }),
    ],
  },

更多信息参见 优化(Optimization)

因为当前我们的代码内容很少，又因为开启了进程的原因，所以实际上我们的打包时间会变长。所以大项目才使用多进程打包。

开启多进程以后的

可以与之前的进行对比

3、减少代码体积

1、tree shaking

1、为什么？

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

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

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

2、是什么？

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。

注意：它依赖 Es Module

3、怎么用？

我们新建src/js/math.js

export function square(x) {
  return x * x;
}

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

在 main.js 中使用

import { cube } from "./js/math";

console.log(cube(5));

然后我们先给webpack.prod.js 配置文件中的 mode 改成 development 然后进行打包

再改回 production再看打包结果，是不是很清晰，只会把用到的代码打包进结果里面。

更多用法请参见 Tree Shaking 文档

webpack production 模式已经默认开启了这个功能。

2、babel

1、为什么？

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

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

你可以引入 Babel runtime 作为一个独立模块，来避免重复引入。

注意：你必须执行 npm install -D @babel/plugin-transform-runtime 来把它包含到你的项目中，然后使用 npm install @babel/runtime 把 @babel/runtime 安装为一个依赖。

2、是什么？

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

更多信息请查看 文档。

3、怎么用？

1、(x)@babel/plugin-transform-runtime

下载包

yarn add @babel/plugin-transform-runtime -D

配置

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/, // 排除 node_modules 下面的代码不进行编译
        use: [
         ...
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true,
              cacheCompression: false,
              presets: ["@babel/preset-env"],
              plugins: ["@babel/plugin-transform-runtime"],
            },
          },
        ],
      },
  ];
}

更多信息请参见文档 babel-loader

这里说的 babel 产生的辅助代码，目前没有测试出来，什么情况下会产生辅助代码，有了解的小伙伴可以评论一波哦！！！

4、优化代码运行性能

1、code split

1、为什么？

打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。

所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。

2、是什么？

代码分割（Code Split）主要做了两件事：

1. 分割文件：将打包生成的文件进行分割，生成多个 js 文件。
2. 按需加载：需要哪个文件就加载哪个文件

3、怎么用？

代码分割实现方式有不同的方式，为了更加方便体现它们之间的差异，我们会分别创建新的文件来演示

1、多入口配置

文件目录

├── public
├── src
|   ├── app.js
|   └── main.js
├── package.json
└── webpack.config.js

app.js

console.log("this is app");

main.js

console.log("this is main");

运行打包命令

yarn build

5、提取重复代码

如果多入口文件中都引用了同一份代码，我们不希望这份代码被打包到两个文件中，导致代码重复，体积更大。

我们需要提取多入口的重复代码，只打包生成一个 js 文件，其他文件引用它就好。

代码如下，两个入口文件都引用了 math.js

app.js

import { sum } from "./js/math";
console.log("this is app");

console.log(sum(1, 2, 3, 4));

main.js

import { sum } from "./js/math";

console.log("this is app");
console.log(sum(1, 2, 3, 4, 5));

math.js

export const sum = (...args) => {
  return args.reduce((p, c) => p + c, 0);
};

看最终生成的 js 文件就有三个，其中有一个就是提取的公共文件

3、按需加载，动态导入

想要实现按需加载，动态导入模块。还需要额外配置：

main.js

console.log("hello main");

document.getElementById("btn").onclick = function () {
  // 动态导入 --> 实现按需加载
  // 即使只被引用了一次，也会代码分割
  import("./js/math.js").then(({ sum }) => {
    alert(sum(1, 2, 3, 4, 5));
  });
};

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <button id="btn">计算</button>
  </body>
</html>

效果如下，在我们点击的时候会发送一个请求，动态获取到 js 脚本内容，然后再执行我们点击事件里面函数

4、单入口

配置文件

  entry: path.resolve(__dirname, "../src/main.js"),

单入口的话，对于动态加载的文件也会单独打包成一个 js 文件。

5、更新配置

最终我们会使用单入口+代码分割+动态导入方式来进行配置。更新之前的配置文件。

    // 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割
      // 其他内容用默认配置即可
    },

6、给动态导入文件取名称

1. 修改文件

main.js

console.log("hello main");

document.getElementById("btn").onclick = function () {
  // 动态导入 --> 实现按需加载
  // 即使只被引用了一次，也会代码分割
  // eslint会对动态导入语法报错，需要修改eslint配置文件
  // webpackChunkName: "math"：这是webpack动态导入模块命名的方式
  // "math"将来就会作为[name]的值显示。
  import(/** webpackChunkName: "math" **/ "./js/math.js").then(({ sum }) => {
    alert(sum(1, 2, 3, 4, 5));
  });
};

eslint 配置

yarn add eslint-plugin-import -D

eslintrc.js配置

plugins: ["import"], // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的

现在动态导入的js文件名也不是乱的了，是我们自定义的。

7、统一命名配置

  output: {
    ...
    filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
    chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
    clean: true, // 自动清空上次打包生成的文件
  },
  
  plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: "static/css/[name].css",
      chunkFilename: "static/css/[name].chunk.css",
    }),
  ],

2、preload / prefetch

1、为什么？

我们前面已经做了代码分割，同时会使用 import 动态导入语法来进行代码按需加载（我们也叫懒加载，比如路由懒加载就是这样实现的）。

但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果。

我们想在浏览器空闲时间，加载后续需要使用的资源。我们就需要用上 Preload 或 Prefetch 技术。

2、是什么？

• Preload：告诉浏览器立即加载资源。
• Prefetch：告诉浏览器在空闲时才开始加载资源。

它们共同点：

• 都只会加载资源，并不执行。
• 都有缓存。

它们区别：

• Preload加载优先级高，Prefetch加载优先级低。
• Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。

总结：

• 当前页面优先级高的资源用 Preload 加载。
• 下一个页面需要使用的资源用 Prefetch 加载。

它们的问题：兼容性较差。

• 我们可以去 Can I Useopen in new window 网站查询 API 的兼容性问题。
• Preload 相对于 Prefetch 兼容性好一点。

3、怎么用？

安装包

yarn add  @vue/preload-webpack-plugin -D 

webpack配置

const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");

  plugins: [
    ...
    new PreloadWebpackPlugin({
      rel: "preload", // preload兼容性更好
      as: "script",
      // rel: 'prefetch' // prefetch兼容性更差
    }),
  ],

看一下打包结果，动态加载的js出现在了 index.html 里面了，

3、network cache

1、为什么？

将来开发时我们对静态资源会使用缓存来优化，这样浏览器第二次请求资源就能读取缓存了，速度很快。

但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，都叫 main.js，一旦将来发布新版本，因为文件名没有变化导致浏览器会直接读取缓存，不会加载新资源，项目也就没法更新了。

所以我们从文件名入手，确保更新前后文件名不一样，这样就可以做缓存了。

协商缓存字段：ETag last-modified

强缓存字段：cache-coltrol expire

更多的可以去了解http 缓存机制

2、是什么？

它们都会生成一个唯一的 hash 值。

• fullhash（webpack4 是 hash）

每次修改任何一个文件，所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。

• chunkhash

根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值。我们 js 和 css 是同一个引入，会共享一个 hash 值。

• contenthash

根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。所有文件 hash 值是独享且不同的。

3、怎么用？

webpack 配置

  output: {
    ...
    filename: "static/js/[name].[contenthash:8].js", // 入口文件打包输出资源命名方式
    chunkFilename: "static/js/[name].[contenthash:8].chunk.js", // 动态导入输出资源命名方式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
    clean: true, // 自动清空上次打包生成的文件
  },
  
 plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[contenthash:8].css",
      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
    }),
  ],

• 问题：

当我们修改 math.js 文件再重新打包的时候，因为 contenthash 原因，math.js 文件 hash 值发生了变化（这是正常的）。

但是 main.js 文件的 hash 值也发生了变化，这会导致 main.js 的缓存失效。明明我们只修改 math.js, 为什么 main.js 也会变身变化呢？

• 原因：

  • 更新前：math.xxx.js, main.js 引用的 math.xxx.js
  • 更新后：math.yyy.js, main.js 引用的 math.yyy.js, 文件名发生了变化，间接导致 main.js 也发生了变化

• 解决：

将 hash 值单独保管在一个 runtime 文件中。

我们最终输出三个文件：main、math、runtime。当 math 文件发送变化，变化的是 math 和 runtime 文件，main 不变。

runtime 文件只保存文件的 hash 值和它们与文件关系，整个文件体积就比较小，所以变化重新请求的代价也小。

4、core-js

1、为什么？

过去我们使用 babel 对 js 代码进行了兼容性处理，其中使用@babel/preset-env 智能预设来处理兼容性问题。

它能将 ES6 的一些语法进行编译转换，比如箭头函数、点点点运算符等。但是如果是 async 函数、promise 对象、数组的一些方法（includes）等，它没办法处理。

所以此时我们 js 代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错。所以我们想要将 js 兼容性问题彻底解决

2、是什么？

core-js 是专门用来做 ES6 以及以上 API 的 polyfill。

polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。

3、怎么用？

main.js

来看一下 build 之后的代码，promise 并没有被编译

引入core-js

yarn add core-js

1、手动引入

main.js

import "core-js/es/promise";
console.log("hello main");

const promise = Promise.resolve();

promise.then(() => {
  console.log("hello promise");
});

这样就会把 core-js 中的关于promise的实现单独拿出去，他会检测浏览器到底支持不支持promise 并对其做其相应的处理。

2、(x)自动引入

main.js

console.log("hello main");

const promise = Promise.resolve();

promise.then(() => {
  console.log("hello promise");
});

const arr = [1, 2, 3];
console.log(arr.includes(1));

修改babel-config.js文件

module.exports = {
  // 预设
  presets: [
    [
      "@babel/preset-env",
      // 按需加载core-js的polyfill
      {
        targets: {
          chrome: "78",
          firefox: "60",
          ie: "6",
          safari: "17",
          edge: "17",
        },
        useBuiltIns: "usage",
        corejs: { version: "3", proposals: true },
      },
    ],
  ],
};

但是在我测试失败，并没有将 promise 的polyfill提取出来，后面再找找办法。

总结

我们从 4 个角度对 webpack 和代码进行了优化：

1. 提升开发体验

• 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。

2. 提升 webpack 提升打包构建速度

• 使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。
• 使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。
• 使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快。
• 使用 Cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。
• 使用 Thead 多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）

3. 减少代码体积

• 使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小。
• 使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。

4. 优化代码运行性能

• 使用 Code Split 对代码进行分割成多个 js 文件，从而使单个文件体积更小，并行加载 js 速度更快。并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。
• 使用 Preload / Prefetch 对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。
• 使用 Network Cache 能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。
• 使用 Core-js 对 js 进行兼容性处理，让我们代码能运行在低版本浏览器。

新手可以跟着 视频课程 学习，有基础的直接跟着文章敲一遍感受一下。

图片压缩和pwa没有写进去，有兴趣可以后面再研究。

• 使用 Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快。（需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。）

• 使用 PWA 能让代码离线也能访问，从而提升用户体验。

求职广告^_^

如有大佬招前端（西安）的可评论留言。

私信或者微信：xiuxiuyifanf，求一个前端开发坑位。