Webpack 5新特性学习与性能优化实践_Javascript

前言

webpack 5的新特性和改进为前端开发者提供了更强大、更高效的构建工具。通过内置的持久性缓存插件、优化的默认配置、webpack cli的改进等，webpack 5使得构建过程更加简化，性能更加优越

1. 长期缓存（long-term caching）

webpack 5通过确定性的chunk id、模块id和导出id实现了长期缓存，这意味着相同的输入将始终产生相同的输出。这样，当你的用户再次访问更新后的网站时，浏览器可以重用旧的缓存，而不是重新下载所有资源。

// webpack.config.js
module.exports = {
  // ...
  output: {
    // 使用contenthash来确保文件名与内容关联
    filename: '[name].[contenthash].js',
    chunkfilename: '[name].[contenthash].chunk.js',
    // 配置资产的hash，确保长期缓存
    assetmodulefilename: '[name].[contenthash][ext][query]',
    // 使用文件系统缓存
    cache: {
      type: 'filesystem',
    },
  },
  // ...
};

2. tree shaking优化

webpack 5增强了tree shaking的效率，尤其是对esm的支持。

// package.json
{
  "sideeffects": false, // 告诉webpack该包没有副作用，可以安全地删除未引用的代码
}

// library.js
export function mylibraryfunction() {
  // ...
}

// main.js
import { mylibraryfunction } from './library.js';

3. 模块合并（concatenate modules）

webpack 5的concatenatemodules选项可以将小型模块合并，减少http请求的数量。不过，这个特性可能会增加内存消耗，因此需要权衡使用：

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    concatenatemodules: true, // 默认为true，但在某些情况下可能需要关闭
  },
  // ...
};

4. node.js模块polyfills移除

webpack 5不再自动注入node.js核心模块的polyfills。开发者需要根据目标环境手动引入：

// 如果需要兼容旧版浏览器，需要手动引入polyfills
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// 或者使用 babel-polyfill
import '@babel/polyfill';

5. 性能优化实践

使用缓存：配置cache.type:'filesystem'以使用文件系统缓存，减少重复构建。
splitchunks优化：根据项目需求调整optimization.splitchunks，例如：

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitchunks: {
      chunks: 'all',
      minsize: 10000, // 调整合适的大小阈值
      maxsize: 0, // 允许所有大小的代码块被分割
    },
  },
  // ...
};

模块解析优化：通过resolve.mainfields和resolve.modules配置，减少模块解析的开销。
并行编译：使用threads-loader或worker-loader来并行处理任务，加快编译速度。
代码分割：利用动态导入（import()）来按需加载代码，减少初始加载时间。

// main.js
import('./dynamic-feature.js').then((dynamicfeature) => {
  dynamicfeature.init();
});

模块联邦：使用webpack.container.module配置，实现跨应用的代码共享，减少重复打包。

// webpack.config.js
module.exports = {
  // ...
  experiments: {
    outputmodule: true, // 开启输出模块支持
  },
  // ...
};

6. tree shaking的深入应用

虽然webpack 5自身对tree shaking进行了优化，但开发者可以通过一些策略进一步提升其效果。确保你的代码遵循以下原则：

避免全局变量污染：全局变量会阻止tree shaking识别未使用的代码。
使用纯净函数：确保函数没有副作用，这样webpack才能安全地移除未调用的函数。
明确导出：使用明确的导出（export const func = ...而非export default func）有助于tree shaking更精确地工作。
dead code elimination：结合eslint的no-unused-vars规则，确保没有未使用的导入。

7. loader和plugin的优化

减少loader使用：每个loader都会增加构建时间，只在必要时使用loader，并考虑是否可以合并某些loader的功能。
loader缓存：确保loader支持并开启了缓存，例如，使用cachedirectory选项。
选择高效的plugin：有些plugin可能对性能影响较大，评估并选择性能更优的替代品，或调整其配置以减少开销。

8. source map策略

source map对于调试至关重要，但也会增加构建时间和输出体积。可以根据环境调整source map的类型：

// webpack.config.js
module.exports = {
  // ...
  devtool: isproduction ? 'source-map' : 'cheap-module-source-map', // 生产环境下使用更小的source map
  // ...
};

9. 图片和静态资源处理

asset modules：webpack 5引入了asset modules，可以直接处理图片和其他静态资源，无需额外配置loader。利用此特性可以简化配置并提升性能。

  module.exports = {
    // ...
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          type: 'asset/resource', // 自动处理资源
        },
      ],
    },
    // ...
  };