Detailed explanation of new features of Webpack 5 and performance optimization practice

1. Long-Term Caching

Webpack 5 implements long-term caching through deterministic Chunk IDs, module IDs, and export IDs, which means that the same input will always produce the same output. In this way, when your users visit the updated website again, the browser can reuse the old cache instead of re-downloading all resources.

// 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 Optimization

Webpack 5 enhances the efficiency of Tree Shaking, especially the support for 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. Concatenate Modules

The concatenateModules option of Webpack 5 can combine small modules to reduce the number of HTTP requests. However, this feature may increase memory consumption, so it is necessary to use it with a trade-off:

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

4. Node.js module Polyfills removal

Webpack 5 no longer automatically injects polyfills for Node.js core modules. Developers need to manually import them according to the target environment:

// 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. Performance optimization practices

• Use cache: Configure cache.type:'filesystem' to use the file system cache to reduce repeated builds.

• SplitChunks optimization: Adjust optimization.splitChunks according to project requirements, for example:
  

// 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
        },
    },
    // ...
};

• Module resolution optimization: Reduce the overhead of module resolution through resolve.mainFields and resolve.modules configurations.

• Parallel compilation: Use threads-loader or worker-loader to process tasks in parallel and speed up compilation.

• Code splitting: Use dynamic import (import()) to load code on demand and reduce initial loading time.
  

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

• Module Federation: Use webpack.container.module configuration to achieve code sharing across applications and reduce duplicate packaging.

// webpack.config.js
module.exports = {
    // ...
    experiments: {
        outputModule: true, // Enable output module support
    },
    // ...
};

6. In-depth application of Tree shaking

Although Webpack 5 itself has optimized Tree shaking, developers can further improve its effect through some strategies. Make sure your code follows the following principles:

• Avoid global variable pollution: Global variables prevent Tree shaking from identifying unused code.
• Use pure functions: Make sure the function has no side effects so that Webpack can safely remove uncalled functions.
• Explicit exports: Using explicit exports (export const func = ... instead of export default func) helps Tree shaking work more accurately.
• Dead Code Elimination: Combined with ESLint's no-unused-vars rule, ensure that there are no unused imports.

7. Loader and Plugin optimization

• Reduce Loader usage: Each Loader will increase build time. Use Loaders only when necessary and consider whether the functions of some Loaders can be merged.
• Loader cache: Make sure that the Loader supports and enables caching, for example, using the cacheDirectory option.
• Choose efficient plugins: Some plugins may have a greater impact on performance. Evaluate and choose better-performing alternatives, or adjust their configuration to reduce overhead.

8. Source Map strategy

Source Map is essential for debugging, but it also increases build time and output size. You can adjust the Source Map type according to the environment:

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

9. Image and static resource processing

• Asset Modules: Webpack 5 introduces Asset Modules, which can directly process images and other static resources without additional configuration of Loader. This feature can simplify configuration and improve performance.

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

• Image compression and optimization: Use tools such as image-webpack-loader to automatically compress images during build to reduce file size.

10. Continuous monitoring and analysis

• Use Webpack Bundle Analyzer: This is a powerful visualization tool that helps you understand the composition of the output package, identify large modules, and then optimize them.
• Regularly review dependencies: Use tools such as npm audit or yarn audit to check the security and update status of dependencies, and promptly remove packages that are no longer used or upgrade to lighter alternatives.