乐趣区

关于前端:webpack配置优化让你的构建速度飞起

jiezi

前言

越来越多的我的项目应用 webpack5 来构建我的项目了，明天给大家带来最前沿的 webpack5 配置，让咱们代码在编译 / 运行时性能更好~
咱们会从以下角度来进行优化：

  1. 晋升打包构建速度
  2. 缩小代码体积
  3. 优化代码运行性能

晋升打包构建速度

在进行打包速度优化之前，须要对以后我的项目每个局部的打包工夫理解分明。

咱们借助 speed-measure-webpack-plugin 插件，它剖析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让咱们对打包工夫较长的局部进行针对性优化。
通过以下命令装置插件：

yarn add speed-measure-webpack-plugin -D

build 就能看到各个局部的打包耗时

放大构建范畴
构建过程是默认全局查找，这十分的耗时。通过手动配置 rules 中的文件查找范畴，能够缩小打包的范畴，从而晋升打包的速度。
在 webpack.config.js 文件中如下配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
};

因为 babel-loader 对文件的转化是十分耗时的，所以放大构建范畴首先就是放大须要 babel-loader 解决的文件范畴。

能够通过 test、include、exclude 三个配置项来命中 Loader 要利用规定的文件，用 include 去命中须要被 babel-loader 解决的文件，exclude 去排除不须要被解决的文件，从而放大了 Loader 解决文件的范畴。

HotModuleReplacement

开发时咱们批改了其中一个模块代码，Webpack 默认会将所有模块全副从新打包编译，速度很慢。
所以咱们须要做到批改某个模块代码，就只有这个模块代码须要从新打包编译，其余模块不变，这样打包速度就能很快。HotModuleReplacement（HMR/ 热模块替换）：在程序运行中，替换、增加或删除模块，而无需从新加载整个页面。

  1. 根本配置
module.exports = {
  // 其余省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否主动关上浏览器
    hot: true, // 开启 HMR 性能（只能用于开发环境，生产环境不须要了）},
};

此时 css 款式通过 style-loader 解决，曾经具备 HMR 性能了。然而 js 还不行。

  1. JS 配置
    在 js 模块当中要加上 module.hot 的判断才能够
// 判断是否反对 HMR 性能
if (module.hot) {module.hot.accept("./js/aaa.js", function (count) {
    //xxx
    console.log(111);
  });

  module.hot.accept("./js/bbb.js", function (sum) {
    //xxx
    console.log(222);
  });
}

但实际上咱们很少看到有这样的写法，为什么呢？这是因为下面开发咱们会应用其余 loader 来解决。

比方：vue-loader, react-hot-loader。他们在解决文件的时候曾经帮咱们做了解决。
这里咱们来简略理解下 HMR 的原理，面试时面试官最喜爱问原理性问题了。

HMR 的工作原理图解

初识 HMR 的时候感觉其很神奇，始终有一些疑难萦绕在脑海。

  1. webpack 能够将不同的模块打包成 bundle 文件或者几个 chunk 文件，然而当我通过 webpack HMR 进行开发的过程中，我并没有在我的 dist 目录中找到 webpack 打包好的文件，它们去哪呢？
  2. 通过查看 webpack-dev-server 的 package.json 文件，咱们晓得其依赖于 webpack-dev-middleware 库，那么 webpack-dev-middleware 在 HMR 过程中表演什么角色？
  3. 应用 HMR 的过程中，通过 Chrome 开发者工具我晓得浏览器是通过 websocket 和 webpack-dev-server 进行通信的，然而 websocket 的 message 中并没有发现新模块代码。打包后的新模块又是通过什么形式发送到浏览器端的呢？为什么新的模块不通过 websocket 随音讯一起发送到浏览器端呢？
  4. 浏览器拿到最新的模块代码，HMR 又是怎么将老的模块替换成新的模块，在替换的过程中怎么解决模块之间的依赖关系？
  5. 当模块的热替换过程中，如果替换模块失败，有什么回退机制吗？

带着下面的问题，于是决定深刻到 webpack 源码，寻找 HMR 底层的神秘

HMR 工作流程图解

上图是 webpack 配合 webpack-dev-server 进行利用开发的模块热更新流程图。

  • 上图底部红色框内是服务端，而下面的橙色框是浏览器端。
  • 绿色的方框是 webpack 代码管制的区域。蓝色方框是 webpack-dev-server 代码管制的区域，洋红色的方框是文件系统，文件批改后的变动就产生在这，而青色的方框是利用自身。

上图显示了咱们批改代码到模块热更新实现的一个周期，通过深绿色的阿拉伯数字符号曾经将 HMR 的整个过程标识了进去。

  1. 第一步，在 webpack 的 watch 模式下，文件系统中某一个文件产生批改，webpack 监听到文件变动，依据配置文件对模块从新编译打包，并将打包后的代码通过简略的 JavaScript 对象保留在内存中。
  2. 第二步是 webpack-dev-server 和 webpack 之间的接口交互，而在这一步，次要是 dev-server 的中间件 webpack-dev-middleware 和 webpack 之间的交互，webpack-dev-middleware 调用 webpack 裸露的 API 对代码变动进行监控，并且通知 webpack，将代码打包到内存中。
  3. 第三步是 webpack-dev-server 对文件变动的一个监控，这一步不同于第一步，并不是监控代码变动从新打包。当咱们在配置文件中配置了 devServer.watchContentBase 为 true 的时候，Server 会监听这些配置文件夹中动态文件的变动，变动后会告诉浏览器端对利用进行 live reload。留神，这儿是浏览器刷新，和 HMR 是两个概念。
  4. 第四步也是 webpack-dev-server 代码的工作，该步骤次要是通过 sockjs(（webpack-dev-server 的依赖）在浏览器端和服务端之间建设一个 websocket 长连贯，将 webpack 编译打包的各个阶段的状态信息告知浏览器端，同时也包含第三步中 Server 监听动态文件变动的信息。浏览器端依据这些 socket 音讯进行不同的操作。当然服务端传递的最次要信息还是新模块的 hash 值，前面的步骤依据这一 hash 值来进行模块热替换。
  5. webpack-dev-server/client 端并不可能申请更新的代码，也不会执行热更模块操作，而把这些工作又交回给了 webpack，webpack/hot/dev-server 的工作就是依据 webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。当然如果仅仅是刷新浏览器，也就没有前面那些步骤了。
  6. HotModuleReplacement.runtime 是客户端 HMR 的中枢，它接管到上一步传递给他的新模块的 hash 值，它通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 申请，服务端返回一个 json，该 json 蕴含了所有要更新的模块的 hash 值，获取到更新列表后，该模块再次通过 jsonp 申请，获取到最新的模块代码。这就是上图中 7、8、9 步骤。
  7. 而第 10 步是决定 HMR 胜利与否的关键步骤，在该步骤中，HotModulePlugin 将会对新旧模块进行比照，决定是否更新模块，在决定更新模块后，查看模块之间的依赖关系，更新模块的同时更新模块间的依赖援用。
  8. 最初一步，当 HMR 失败后，回退到 live reload 操作，也就是进行浏览器刷新来获取最新打包代码。

参考 前端进阶面试题具体解答

OneOf

打包时每个文件都会通过所有 loader 解决，尽管因为 test 正则起因理论没有解决上，然而都要过一遍。比较慢。实际上就是匹配上一个 loader, 剩下的就不匹配了。

代码如下

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, // 开发模式没有输入，不须要指定输入目录
    filename: "static/js/main.js", // 将 js 文件输入到 static/js 目录中
    // clean: true, // 开发模式没有输入，不须要清空输入后果
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组外面 Loader 执行程序是从右到左
            use: ["style-loader", "css-loader"],
          },

          {test: /\.(ttf|woff2?)$/,
            type: "asset/resource",
            generator: {filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,
            exclude: /node_modules/, // 排除 node_modules 代码不编译
            loader: "babel-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定查看文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创立文件
      // 新的 html 文件有两个特点：1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否主动关上浏览器
    hot: true, // 开启 HMR 性能
  },
};

Cache

每次打包时 js 文件都要通过 Eslint 查看 和 Babel 编译，速度比较慢。
咱们能够缓存之前的 Eslint 查看 和 Babel 编译后果，这样第二次打包时速度就会更快了。对 Eslint 查看 和 Babel 编译后果进行缓存。

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, // 开发模式没有输入，不须要指定输入目录
    filename: "static/js/main.js", // 将 js 文件输入到 static/js 目录中
    // clean: true, // 开发模式没有输入，不须要清空输入后果
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组外面 Loader 执行程序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          }，{
            test: /\.js$/,
            // exclude: /node_modules/, // 排除 node_modules 代码不编译
            include: path.resolve(__dirname, "../src"), // 也能够用蕴含
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 开启 babel 编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定查看文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创立文件
      // 新的 html 文件有两个特点：1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否主动关上浏览器
    hot: true, // 开启 HMR 性能
  },

};

长久化缓存

咱们还能够通过通过配置 webpack 长久化缓存 cache: filesystem，来缓存生成的 webpack 模块和 chunk，改善构建速度。

简略来说，通过 cache: filesystem 能够将构建过程的 webpack 模板进行缓存，大幅晋升二次构建速度、打包速度，当构建忽然中断，二次进行构建时，能够间接从缓存中拉取，可提速 90% 左右。
配置形式如下：

module.exports = {
  cache: {type: "filesystem", // 应用文件缓存},
};

Network Cache

未来开发时咱们对动态资源会应用缓存来优化，这样浏览器第二次申请资源就能读取缓存了，速度很快。

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

所以咱们从文件名动手，确保更新前后文件名不一样，这样就能够做缓存了。

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

  • fullhash（webpack4 是 hash）

每次批改任何一个文件，所有文件名的 hash 至都将扭转。所以一旦批改了任何一个文件，整个我的项目的文件缓存都将生效。

  • chunkhash

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

  • contenthash

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

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

// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};
module.exports = {
  entry: "./src/main.js",
  output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
    // [contenthash:8]应用 contenthash，取 8 位长度
    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: [ ],
    // 代码宰割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行宰割
      // 其余内容用默认配置即可
    },
  },
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否主动关上浏览器
  // },
  mode: "production",
  devtool: "source-map",
};

Thead

当我的项目越来越宏大时，打包速度越来越慢，甚至于须要一个下午能力打包进去代码。这个速度是比较慢的。
咱们想要持续晋升打包速度，其实就是要晋升 js 的打包速度，因为其余文件都比拟少。
而对 js 文件解决次要就是 eslint、babel、Terser 三个工具，所以咱们要晋升它们的运行速度。
咱们能够开启多过程同时解决 js 文件，这样速度就比之前的单过程打包更快了。

作用：多过程打包 , 开启电脑的多个过程同时干一件事，速度更快。 须要留神：请仅在特地耗时的操作中应用，因为每个过程启动就有大概为 600ms 左右开销。

咱们启动过程的数量就是咱们 CPU 的核数。

1.  如何获取 CPU 的核数，因为每个电脑都不一样。// nodejs 外围模块，间接应用
const os = require("os");
// cpu 核数
const threads = os.cpus().length;
const os = require("os");
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

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

// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
    filename: "static/js/main.js", // 将 js 文件输入到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组外面 Loader 执行程序是从右到左
            use: getStyleLoaders(),},
          {
            test: /\.less$/,
            use: getStyleLoaders("less-loader"),
          },
          {test: /\.s[ac]ss$/,
            use: getStyleLoaders("sass-loader"),
          },
          {
            test: /\.styl$/,
            use: getStyleLoaders("stylus-loader"),
          },
          {test: /\.(ttf|woff2?)$/,
            type: "asset/resource",
            generator: {filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            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 编译缓存},
              },
            ],
          },
        ],
      },
    ],
  },
  plugins:[//xxx],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否主动关上浏览器
  // },
  mode: "production",
  devtool: "source-map",
};

Tree Shaking

开发时咱们定义了一些工具函数库，或者援用第三方工具函数库或组件库。
如果没有非凡解决的话咱们打包时会引入整个库，然而实际上可能咱们可能只用上极小局部的性能。
这样将整个库都打包进来，体积就太大了。Tree Shaking 是一个术语，通常用于形容移除 JavaScript 中的没有应用上的代码。

留神：它依赖 ES Module。 Webpack 曾经默认开启了这个性能，无需其余配置。

Babel

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

Babel 对一些公共办法应用了十分小的辅助代码，比方 _extend。默认状况下会被增加到每一个须要它的文件中。

你能够将这些辅助代码作为一个独立模块，来防止反复引入。

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

  1. 下载包
npm i @babel/plugin-transform-runtime -D
  1. 配置
const os = require("os");
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

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

// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
    filename: "static/js/main.js", // 将 js 文件输入到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组外面 Loader 执行程序是从右到左
            use: getStyleLoaders(),},
          {
            test: /\.less$/,
            use: getStyleLoaders("less-loader"),
          },
          {test: /\.s[ac]ss$/,
            use: getStyleLoaders("sass-loader"),
          },
          {
            test: /\.styl$/,
            use: getStyleLoaders("stylus-loader"),
          },

          {
            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"], // 缩小代码体积
                },
              },
            ],
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定查看文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 开启多过程
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创立文件
      // 新的 html 文件有两个特点：1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取 css 成独自文件
    new MiniCssExtractPlugin({
      // 定义输入文件名和目录
      filename: "static/css/main.css",
    }),
    // css 压缩
    // new CssMinimizerPlugin(),],
  optimization: {
    minimizer: [
      // css 压缩也能够写到 optimization.minimizer 外面，成果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启 TerserPlugin，然而咱们须要进行其余配置，就要从新写了
      new TerserPlugin({parallel: threads, // 开启多过程}),
    ]
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否主动关上浏览器
  // },
  mode: "production",
  devtool: "source-map",
};

优化代码运行性能

多入口

  1. 文件目录
├── public
├── src
|   ├── app.js
|   └── main.js
├── package.json
└── webpack.config.js
  1. 下载包
npm i webpack webpack-cli html-webpack-plugin -D
  1. 新建文件

内容无关紧要，次要察看打包输入的后果

  • app.js
console.log("hello app");
  • main.js
console.log("hello main");
  1. 配置
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 单入口
  // entry: './src/main.js',
  // 多入口
  entry: {
    main: "./src/main.js",
    app: "./src/app.js",
  },
  output: {path: path.resolve(__dirname, "./dist"),
    // [name]是 webpack 命名规定，应用 chunk 的 name 作为输入的文件名。// 什么是 chunk？打包的资源就是 chunk，输入进来叫 bundle。// chunk 的 name 是啥呢？比方：entry 中 xxx: "./src/xxx.js", name 就是 xxx。留神是后面的 xxx，和文件名无关。// 为什么须要这样命名呢？如果还是之前写法 main.js，那么打包生成两个 js 文件都会叫做 main.js 会产生笼罩。(实际上会间接报错的)
    filename: "js/[name].js",
    clear: true,
  },
  plugins: [
    new HtmlWebpackPlugin({template: "./public/index.html",}),
  ],
  mode: "production",
};
  1. 运行指令
npx webpack

此时在 dist 目录咱们能看到输入了两个 js 文件。

总结：配置了几个入口，至多输入几个 js 文件。

提取反复代码

如果多入口文件中都援用了同一份代码，咱们不心愿这份代码被打包到两个文件中，导致代码反复，体积更大。

咱们须要提取多入口的反复代码，只打包生成一个 js 文件，其余文件援用它就好。

  1. 批改文件
  2. app.js
import {sum} from "./math";

console.log("hello app");
console.log(sum(1, 2, 3, 4));
  • main.js
import {sum} from "./math";

console.log("hello main");
console.log(sum(1, 2, 3, 4, 5));
  • math.js
export const sum = (...args) => {return args.reduce((p, c) => p + c, 0);
};
  1. 批改配置文件
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 单入口
  // entry: './src/main.js',
  // 多入口
  entry: {
    main: "./src/main.js",
    app: "./src/app.js",
  },
  output: {path: path.resolve(__dirname, "./dist"),
    // [name]是 webpack 命名规定，应用 chunk 的 name 作为输入的文件名。// 什么是 chunk？打包的资源就是 chunk，输入进来叫 bundle。// chunk 的 name 是啥呢？比方：entry 中 xxx: "./src/xxx.js", name 就是 xxx。留神是后面的 xxx，和文件名无关。// 为什么须要这样命名呢？如果还是之前写法 main.js，那么打包生成两个 js 文件都会叫做 main.js 会产生笼罩。(实际上会间接报错的)
    filename: "js/[name].js",
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({template: "./public/index.html",}),
  ],
  mode: "production",
  optimization: {
    // 代码宰割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分
      // 批改配置
      cacheGroups: {
        // 组，哪些模块要打包到一个组
        // defaultVendors: { // 组名
        //   test: /[\\/]node_modules[\\/]/, // 须要打包到一起的模块
        //   priority: -10, // 权重（越大越高）//   reuseExistingChunk: true, // 如果以后 chunk 蕴含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
        // },
        default: {
          // 其余没有写的配置会应用下面的默认值
          minSize: 0, // 咱们定义的文件体积太小了，所以要改打包的最小文件体积
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
  1. 运行指令
npx webpack

此时咱们会发现生成 3 个 js 文件，其中有一个就是提取的公共模块。

按需加载，动静导入

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

  1. 批改文件
  2. main.js
console.log("hello main");

document.getElementById("btn").onclick = function () {
  // 动静导入 --> 实现按需加载
  // 即便只被援用了一次，也会代码宰割
  import("./math.js").then(({sum}) => {alert(sum(1, 2, 3, 4, 5));
  });
};
  • app.js
console.log("hello app");
  • public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code Split</title>
  </head>
  <body>
    <h1>hello webpack</h1>
    <button id="btn"> 计算 </button>
  </body>
</html>
  1. 运行指令
npx webpack

咱们能够发现，一旦通过 import 动静导入语法导入模块，模块就被代码宰割，同时也能按需加载了。

给动静导入文件取名称

  1. 批改文件
  2. main.js
import sum from "./js/sum";
// 引入资源，Webpack 才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

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

// 以下代码生产模式下会删除
if (module.hot) {module.hot.accept("./js/sum.js", function (sum) {const result2 = sum(1, 2, 3, 4);
    console.log(result2);
  });
}

document.getElementById("btn").onClick = function () {
  // eslint 会对动静导入语法报错，须要批改 eslint 配置文件
  // webpackChunkName: "math"：这是 webpack 动静导入模块命名的形式
  // "math" 未来就会作为 [name] 的值显示。import(/* webpackChunkName: "math" */ "./js/math.js").then(({count}) => {console.log(count(2, 1));
  });
};

eslint 配置

npm i eslint-plugin-import -D
// .eslintrc.js
module.exports = {
  // 继承 Eslint 规定
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用 node 中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  plugins: ["import"], // 解决动静导入 import 语法报错问题 --> 理论应用 eslint-plugin-import 的规定解决的
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {"no-var": 2, // 不能应用 var 定义变量},
};

对立命名配置

const os = require("os");
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

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

// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
    filename: "static/js/[name].js", // 入口文件打包输入资源命名形式
    chunkFilename: "static/js/[name].chunk.js", // 动静导入输入资源命名形式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名形式（留神用 hash）clean: true,
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /.css$/,
            // use 数组外面 Loader 执行程序是从右到左
            use: getStyleLoaders(),},
          {
            test: /.less$/,
            use: getStyleLoaders("less-loader"),
          },
          {test: /.s[ac]ss$/,
            use: getStyleLoaders("sass-loader"),
          },
          {
            test: /.styl$/,
            use: getStyleLoaders("stylus-loader"),
          },
          {test: /.(png|jpe?g|gif|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {maxSize: 10 * 1024, // 小于 10kb 的图片会被 base64 解决},
            },
            // generator: {
            //   // 将图片文件输入到 static/imgs 目录中
            //   // 将图片文件命名 [hash:8][ext][query]
            //   // [hash:8]: hash 值取 8 位
            //   // [ext]: 应用之前的文件扩展名
            //   // [query]: 增加之前的 query 参数
            //   filename: "static/imgs/[hash:8][ext][query]",
            // },
          },
          {test: /.(ttf|woff2?)$/,
            type: "asset/resource",
            // generator: {//   filename: "static/media/[hash:8][ext][query]",
            // },
          },
          {
            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"], // 缩小代码体积
                },
              },
            ],
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定查看文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 开启多过程
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创立文件
      // 新的 html 文件有两个特点：1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取 css 成独自文件
    new MiniCssExtractPlugin({
      // 定义输入文件名和目录
      filename: "static/css/[name].css",
      chunkFilename: "static/css/[name].chunk.css",
    }),
    // css 压缩
    // new CssMinimizerPlugin(),],
  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",},
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
    // 代码宰割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行宰割
      // 其余内容用默认配置即可
    },
  },
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否主动关上浏览器
  // },
  mode: "production",
  devtool: "source-map",
};

运行指令

npx webpack

察看打包输入 js 文件名称。

Preload / Prefetch

咱们后面曾经做了代码宰割，同时会应用 import 动静导入语法来进行代码按需加载（咱们也叫懒加载，比方路由懒加载就是这样实现的）。

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

咱们想在浏览器闲暇工夫，加载后续须要应用的资源。咱们就须要用上 Preload 或 Prefetch 技术。

  • Preload：通知浏览器立刻加载资源。
  • Prefetch：通知浏览器在闲暇时才开始加载资源。
    它们共同点：
  • 都只会加载资源，并不执行。
  • 都有缓存。
    它们区别：
  • Preload加载优先级高，Prefetch加载优先级低。
  • Preload只能加载以后页面须要应用的资源，Prefetch能够加载以后页面资源，也能够加载下一个页面须要应用的资源。

总结：

  • 以后页面优先级高的资源用 Preload 加载。
  • 下一个页面须要应用的资源用 Prefetch 加载。

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

  • 咱们能够去 Can I Use 网站查问 API 的兼容性问题。
  • Preload 绝对于 Prefetch 兼容性好一点
npm i @vue/preload-webpack-plugin -D

配置如下

const os = require("os");
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");

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

// 获取解决款式的 Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env", // 能解决大多数款式兼容性问题],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {path: path.resolve(__dirname, "../dist"), // 生产模式须要输入
    filename: "static/js/[name].js", // 入口文件打包输入资源命名形式
    chunkFilename: "static/js/[name].chunk.js", // 动静导入输入资源命名形式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名形式（留神用 hash）clean: true,
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /.css$/,
            // use 数组外面 Loader 执行程序是从右到左
            use: getStyleLoaders(),},
          {
            test: /.less$/,
            use: getStyleLoaders("less-loader"),
          },
          {test: /.s[ac]ss$/,
            use: getStyleLoaders("sass-loader"),
          },
          {
            test: /.styl$/,
            use: getStyleLoaders("stylus-loader"),
          },
          {test: /.(png|jpe?g|gif|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {maxSize: 10 * 1024, // 小于 10kb 的图片会被 base64 解决},
            },
            // generator: {
            //   // 将图片文件输入到 static/imgs 目录中
            //   // 将图片文件命名 [hash:8][ext][query]
            //   // [hash:8]: hash 值取 8 位
            //   // [ext]: 应用之前的文件扩展名
            //   // [query]: 增加之前的 query 参数
            //   filename: "static/imgs/[hash:8][ext][query]",
            // },
          },
          {test: /.(ttf|woff2?)$/,
            type: "asset/resource",
            // generator: {//   filename: "static/media/[hash:8][ext][query]",
            // },
          },
          {
            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"], // 缩小代码体积
                },
              },
            ],
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定查看文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 开启多过程
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创立文件
      // 新的 html 文件有两个特点：1. 内容和源文件统一 2. 主动引入打包生成的 js 等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取 css 成独自文件
    new MiniCssExtractPlugin({
      // 定义输入文件名和目录
      filename: "static/css/[name].css",
      chunkFilename: "static/css/[name].chunk.css",
    }),
    // css 压缩
    // new CssMinimizerPlugin(),
    new PreloadWebpackPlugin({
      rel: "preload", // preload 兼容性更好
      as: "script",
      // rel: 'prefetch' // prefetch 兼容性更差
    }),
  ],
  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",},
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
    // 代码宰割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行宰割
      // 其余内容用默认配置即可
    },
  },
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否主动关上浏览器
  // },
  mode: "production",
  devtool: "source-map",
};

Core-js

过来咱们应用 babel 对 js 代码进行了兼容性解决，其中应用 @babel/preset-env 智能预设来解决兼容性问题。

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

所以此时咱们 js 代码依然存在兼容性问题，一旦遇到低版本浏览器会间接报错。所以咱们想要将 js 兼容性问题彻底解决，core-js 是专门用来做 ES6 以及以上 API 的 polyfill。

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

npm i core-js

手动全副援用：

import "core-js";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack 才会对其打包
const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
// 增加 promise 代码
const promise = Promise.resolve();
promise.then(() => {console.log("hello promise");
});

下面时手动全副援用的状况，这样引入会将所有兼容性代码全副引入，体积太大了。咱们只想引入 promise 的 polyfill。

手动按需引入

import "core-js/es/promise";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack 才会对其打包
const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
// 增加 promise 代码
const promise = Promise.resolve();
promise.then(() => {console.log("hello promise");
});

只引入打包 promise 的 polyfill，打包体积更小。然而未来如果还想应用其余语法，我须要手动引入库很麻烦。

主动按需引入

import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack 才会对其打包
const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
// 增加 promise 代码
const promise = Promise.resolve();
promise.then(() => {console.log("hello promise");
});
//babel.config.js
module.exports = {
  // 智能预设：可能编译 ES6 语法
  presets: [
    [
      "@babel/preset-env",
      // 按需加载 core-js 的 polyfill
      {useBuiltIns: "usage", corejs: { version: "3", proposals: true} },
    ],
  ],
};

externals

externals 能够通知 webpack 不打包资源，从而缩小入口文件的大小，如果不打包某个包，又要用到他，这个时候须要从 html 的 script 标签进行引入，个别引入的是包的 cdn 资源, 配置 externals 的办法有多种：具体查看 webpack 官网 externals。

例如，从 CDN 引入 jQuery，而不是把它打包：

index.html

<script
 src="https://code.jquery.com/jquery-3.1.0.js"
 integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
 crossorigin="anonymous"
></script>

这样就剥离了那些不须要改变的依赖模块，换句话，上面展现的代码还能够失常运行：

import $ from 'jquery';

$('.my-element').animate(/* ... */);

webpack.config.js

module.exports = {
  //...
  externals: {jquery: 'jQuery',},
};

其实 webpack 自带了插入 cdn 的办法，而且有很多种，具体本人查看官网，这里将一种最罕用的。

增加 externalsType: ‘script’ , 批改 externals 配置，将 jquery 的值改为数组

Shimming 预置依赖，ProvidePlugin

webpack compiler 可能辨认遵循 ES2015 模块语法、CommonJS 或 AMD 标准编写的模块。然而，一些 third party(第三方库) 可能会援用一些全局依赖（例如 jQuery 中的 $）。因而这些 library 也可能会创立一些须要导出的全局变量。这些“broken modules(不符合规范的模块)”就是 shimming(预置依赖) 发挥作用的中央。index.js:

import $ from 'jquery'
import _ from 'lodash'
import {ui} from './ui'

ui()

const dom = $('<div>')
dom.html(_.join(['Niall','August'],'-'))
$('body').append(dom)

ui.js:

export function ui(){ $('body').css('background',_.join(['green'],'')) }

ui.js的作用就是将 body 的背景色彩设置为 green，然而在ui.js 中须要用到 jquery 的 $ 和 lodash 的 _，这种状况下，尽管webpack 能够打包 index.js，然而这个ui.js 却并不能施展它的作用，控制台会报以下谬误：

解决办法： 为 webpack 提供预置依赖

const path = require('path');
const webpack = require('webpack');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'main.js',
     path: path.resolve(__dirname, 'dist'),
   },
  plugins: [new webpack.HotModuleReplacementPlugin(),
    // new BundleAnalyzerPlugin(),
    new webpack.ProvidePlugin({
      _: 'lodash',
      $: 'jquery'
    })
  ],

这里 _: 'lodash' 让ProvidePlugin在打包一个文件时，如果发现了该文件中应用到了 _，那么就会向其中注入var _ = require('lodash')'。
其实还有一种写法：
如果咱们想在我的项目中随处应用_.join()，那么咱们能够这样写：

new webpack.ProvidePlugin({_join: ['lodash','join'], $: 'jquery' })

这里的 join: ['lodash','join'] 会让 ProvidePlugin 向应用了 join 的文件中注入：

var _join = require('lodash').join

ui.js:

export function ui(){ $('body').css('background',_join(['green'],'')) }

这样就能达到咱们想要的成果了。

好了，到这咱们的高级配置就到这里了，除了下面这些还有其余优化伎俩，到这就不一一列举了，感兴趣的能够本人到官网上查阅，上面咱们来总结一下咱们从 4 个角度对 webpack 和代码进行了优化：

  1. 晋升 webpack 晋升打包构建速度
  2. 应用 peed-measure-webpack-plugin 剖析打包耗时，进行针对性优化。
  3. 应用 HotModuleReplacement 让开发时只从新编译打包更新变动了的代码，不变的代码应用缓存，从而使更新速度更快。
  4. 应用 OneOf 让资源文件一旦被某个 loader 解决了，就不会持续遍历了，打包速度更快。
  5. 应用 Cache 对 eslint 和 babel 解决的后果进行缓存，让第二次打包速度更快。
  6. 应用 Thead 多过程解决 eslint 和 babel 工作，速度更快。（须要留神的是，过程启动通信都有开销的，要在比拟多代码解决时应用才有成果）
  7. 缩小代码体积
  8. 应用 Tree Shaking 剔除了没有应用的多余代码，让代码体积更小。
  9. 应用 @babel/plugin-transform-runtime 插件对 babel 进行解决，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。
  10. 应用 externals 对须要宰割的代码进行 cdn 资源援用，缩小代码的体积，但同时会减少带宽。
  11. 优化代码运行性能
  12. 应用 Code Split 对代码进行宰割成多个 js 文件，从而使单个文件体积更小，并行加载 js 速度更快。并通过 import 动静导入语法进行按需加载，从而达到须要应用时才加载该资源，不必时不加载资源。
  13. 应用 Preload / Prefetch 对代码进行提前加载，等将来须要应用时就能间接应用，从而用户体验更好。
  14. 应用 Core-js 对 js 进行兼容性解决，让咱们代码能运行在低版本浏览器。
  15. 应用 ProvidePlugin 对需援用代码# # Shimming 预置依赖
退出移动版