项目过大,编译就会非常慢,每次入手新项目看着爬一样的速度,实在忍不住会想优化一下编译速度
用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)
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。