Webpack 5的新鲜尝鲜，职场的进行时进行态！

2023-10-16 18:56:39

Webpack 5 作为一项前端构建工具的集大成者，在不断迭代更新中不断完善，带来了更多便于使用的新特性。在这一篇文章中，我们将着重介绍三个不容忽视的亮点：资源模块、缓存机制和性能改进。

资源模块，赋能资产加载

资源模块的出现，大大简化了我们对静态资源（如图片、字体、音频等）的加载方式，无需配置额外的 loader 即可直接使用。
webpack 5 引入了资源模块，让开发者能够在webpack中轻松管理静态资源。开发者可以将资源文件（例如图像、字体或音频）作为模块导入，而无需使用单独的加载器来处理。这使得开发过程更加简洁和高效。

启用资源模块，小试牛刀

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        type: "asset",
      },
    ],
  },
};

缓存机制，加速构建流程

Webpack 5 针对构建速度也带来了大幅提升。通过缓存编译后的模块和代码块，可以有效减少后续构建的重复工作，大大加快构建速度。尤其是对于大型项目而言，这个优势尤为突出。
webpack 5 还提供了新的缓存机制，可以缓存编译后的模块和 chunk，从而加快构建速度。在开发模式下，缓存类型会被设置为 "memory"，而在生产模式下，缓存类型会被设置为 "filesystem"。这意味着在开发过程中，webpack 会将编译后的模块和 chunk 存储在内存中，以便快速访问。而在生产模式下，webpack 会将编译后的模块和 chunk 存储在文件系统中，以便在下次构建时重用。

启用缓存机制，亲测提速

// webpack.config.js
module.exports = {
  cache: {
    type: "filesystem",
  },
};

性能改进，所见所得

在webpack 5中，对于构建性能也进行了全方位的优化，在各个环节都做了改进，比如打包器的选择，使得整体构建过程更加高效。
webpack 5 还进行了一些性能改进，例如改进了打包器选择算法，使其能够选择最佳的打包器来构建项目。此外，webpack 5 还改进了并行构建功能，使其能够更有效地利用多核处理器。

体验性能提升，眼见为实

// webpack.config.js
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};