Webpackage 5 compilation package optimization

Webpack is available at v5.37.0

Persistent caching and code splitting for webpack5

Persistent cache: “development environment” compile speed data comparison

The Node version	Unoptimized time	First compilation time after optimization	Second compilation time after optimization	It took three compilations after optimization	Reduced elapsed time (three compilations)
v14.16.1	18.85	18.016(Write Cache)	10.042	10.81	43%

Persistent cache + unsplit code: “Production environment” build speed data comparison

The Node version	Unoptimized time	First compilation time after optimization	Second compilation time after optimization	It took three compilations after optimization	Reduced elapsed time (three compilations)
v14.16.1	33.04	33.15(Write cache)	24.43	25.79	22%

Persistent cache + split code: “Production environment” build speed data comparison (better combined)

The Node version	Unoptimized time	First compilation time after optimization	Second compilation time after optimization	It took three compilations after optimization	Reduced elapsed time (three compilations)
v14.16.1	32.65	33.68(Write cache)	13.59	13.12	60%

In the development environment, persistent cache can effectively save compilation time, which is reduced by 43%.
In production environment, persistent cache and split code are used together to save compilation time more effectively, which is reduced by 60%.
In production, the split code gzip package was reduced by 100K

Introduction of webpack5 new attribute persistent caching (development and production environments)

Reference links: webpack.docschina.org/blog/2020-1…

cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
}
Copy the code

Split code (production environment)

optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all'
    }
}
Copy the code