Webpack 5新特性详解及性能优化实践

1.长期缓存

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

// webpack.config.js
module.exports = {
    // ...
    output: {
        // Use contenthash to ensure that the file name is associated with the content
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].chunk.js',
        // Configure the asset hash to ensure long-term caching
        assetModuleFilename: '[name].[contenthash][ext][query]',
        // Use file system cache
        cache: {
            type: 'filesystem',
        },
    },
    // ...
};

2. Tree Shaking 优化

Webpack 5 增强了 Tree Shaking 的效率，特别是对 ESM 的支持。

// package.json
{
    "sideEffects": false, // Tell Webpack that this package has no side effects and can safely remove unreferenced code
}

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

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

3. 连接模块

Webpack 5 的 concatenateModules 选项可以合并小模块以减少 HTTP 请求数。但是，该功能可能会增加内存消耗，因此需要权衡使用：

// webpack.config.js
    module.exports = {
    // ...
    optimization: {
        concatenateModules: true, // Defaults to true, but may need to be turned off in some cases
    },
    // ...
    };

4. 删除 Node.js 模块 Polyfill

Webpack 5 不再自动注入 Node.js 核心模块的 polyfill，开发者需要根据目标环境手动导入：

// If you need to be compatible with older browsers, you need to manually import polyfills
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// Or use babel-polyfill
import '@babel/polyfill';

5. 性能优化实践

使用缓存：配置cache.type:'filesystem'使用文件系统缓存，减少重复构建。

SplitChunks优化：根据项目需求调整optimization.splitChunks，例如：

// webpack.config.js
module.exports = {
// ...
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 10000, // Adjust the appropriate size threshold
            maxSize: 0, // Allow code chunks of all sizes to be split
        },
    },
    // ...
};

模块解析优化：通过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, // Enable output module support
    },
    // ...
};

6. Tree shake 的深入应用

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

避免全局变量污染：全局变量可防止 Tree shake 识别未使用的代码。

使用纯函数：确保函数没有副作用，以便 Webpack 可以安全地删除未调用的函数。

显式导出：使用显式导出（export const func = ... 而不是 export default func）有助于 Tree shake 更准确地工作。

消除死代码：结合 ESLint 的 no-unused-vars 规则，确保没有未使用的导入。

7. Loader 和 Plugin 优化

减少 Loader 使用：每个 Loader 都会增加构建时间。仅在必要时使用 Loader，并考虑是否可以合并某些 Loader 的功能。

Loader 缓存：确保 Loader 支持并启用缓存，例如使用 cacheDirectory 选项。

选择高效的插件：某些插件可能会对性能产生较大影响。评估并选择性能更好的替代方案，或调整其配置以减少开销。

8.Source Map 策略

Source Map 对于调试至关重要，但它也会增加构建时间和输出大小。你可以根据环境调整 Source Map 类型：

// webpack.config.js
module.exports = {
    // ...
    devtool: isProduction ? 'source-map' : 'cheap-module-source-map', // Use a smaller Source Map in production environment
    // ...
};

9. 图片及静态资源处理

Asset Modules：Webpack 5 引入了 Asset Modules，可以直接处理图片等静态资源，无需额外配置 Loader。该功能可以简化配置，提高性能。

module.exports = {
    // ...
    module: {
        rules: [
        {
            test: /\.(png|jpe?g|gif|svg)$/i,
            type: 'asset/resource', // Automatic resource processing
        },
        ],
    },
    // ...
};

图片压缩和优化：使用 image-webpack-loader 等工具在构建过程中自动压缩图片以减小文件大小。

10.持续监测和分析

使用 Webpack Bundle Analyzer：这是一个强大的可视化工具，可以帮助您了解输出包的组成，识别大模块，然后进行优化。

定期审查依赖项：使用 npm audit 或 yarn audit 等工具检查依赖项的安全和更新状态，及时删除不再使用的软件包或升级到更轻量的替代方案。

CLIS.CC