前言

越来越多的我的项目应用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 操作，也就是进行浏览器刷新来获取最新打包代码。

webpack视频解说：进入学习

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;// 获取解决款式的Loadersconst 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;// 获取解决款式的Loadersconst 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;// 获取解决款式的Loadersconst 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.jsconst 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.jsconst 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.jsmodule.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;// 获取解决款式的Loadersconst 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;// 获取解决款式的Loadersconst 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.jsmodule.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 预置依赖