项目过大,编译就会非常慢,每次入手新项目看着爬一样的速度,实在忍不住会想优化一下编译速度

用speed-measure-webpack-plugin和webpack-bundle-analyzer 分析项目
image.png

优化方案

缓存优化
hard-source-webpack-plugin,这插件为模块提供中间缓存步骤,但项目得跑两次,第一次构建时间正常,第二次大概能省去90%左右的时间。
npm i hard-source-webpack-plugin -D

plugins: [
  new HardSourceWebpackPlugin()
]

但是项目中其实没有独立的webpack.config.js文件,所以只能放在vue.config.js文件中,使用chainWebpack来将配置插入到webpack中去
官网中的使用cache缓存
image.png

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

配合HardSourceWebpackPlugin

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

HappyCodingTop
526 声望847 粉丝

Talk is cheap, show the code!!