我的项目过大,编译就会十分慢,每次动手新我的项目看着爬一样的速度,切实忍不住会想优化一下编译速度
用 speed-measure-webpack-plugin 和 webpack-bundle-analyzer 剖析我的项目
优化计划
缓存优化
hard-source-webpack-plugin,这插件为模块提供两头缓存步骤,但我的项目得跑两次,第一次构建工夫失常,第二次大略能省去 90% 左右的工夫。npm i hard-source-webpack-plugin -D
plugins: [new HardSourceWebpackPlugin()
]
然而我的项目中其实没有独立的 webpack.config.js 文件,所以只能放在 vue.config.js 文件中,应用 chainWebpack 来将配置插入到 webpack 中去
官网中的应用 cache 缓存
chainWebpack: (config) => {config.cache(true)
}
配合 HardSourceWebpackPlugin
chainWebpack: (config) => {config.plugin('cache').use(HardSourceWebpackPlugin)
}