Webpack compilation speed optimization

Time:2022-5-6

If the project is too large, the compilation will be very slow. Every time I start a new project, I look at the same speed. I can’t help but want to optimize the compilation speed

Analyze projects with speed measure webpack plugin and webpack bundle analyzer
Webpack compilation speed optimization

Optimization scheme

Cache optimization
Hard source webpack plugin, which provides intermediate caching steps for the module, but the project has to run twice. The first construction time is normal, and the second time can save about 90% of the time.
npm i hard-source-webpack-plugin -D

plugins: [
  new HardSourceWebpackPlugin()
]

But there is no independent webpack in the project config. JS file, so it can only be placed in Vue config. JS file, use chainwebpack to insert the configuration into the webpack
Using cache in the official website
Webpack compilation speed optimization

chainWebpack: (config) => {
  config.cache(true)
}

With hardsourcewebpackplugin

chainWebpack: (config) => {
  config.plugin('cache').use(HardSourceWebpackPlugin)
}

Recommended Today

Talk about dragon lizard hardware compatibility sig

Editor’s note: what does dragon lizard community hardware compatibility sig mainly do? How compatible are the hardware devices with each distribution of the dragon lizard operating system? How to evaluate? Let’s talk about the hardware compatibility. This article is compiled from the 12th live broadcast of dragon lizard lecture hall technology. Wu Chaofeng, a core […]