# vue-cli+webpack构建优化 * 版本:vue3 * 参考文章:https://segmentfault.com/a/1190000022205477 ## vue3 在根目录下创建配置文件vue.config.js配置webpack ![](https://img.kancloud.cn/a6/57/a657e90e88987516758b759918d1de7f_884x904.png) * speed-mesure-webpack-plugin:测量各个插件和 loader 所花费的时间 * webpack-bundle-analyzer:代码构建目录结构分析 * hard-source-webpack-plugin:为模块提供中间缓存 * 配置目录参考:[https://cli.vuejs.org/zh/config/#vue-config-js]() * 简单配置参考:[https://cli.vuejs.org/zh/guide/webpack.html]() ## 第一次构建 ![](https://img.kancloud.cn/a9/4a/a94add2e9cead0a6445c2ba6ed91d909_761x285.png) * 36s [webpack-bundle-analyzer] ## 第二次构建 ![](https://img.kancloud.cn/37/f8/37f83a2b0476f326067318d6414d2a52_801x461.png) * [speed-mesure-webpack-plugin + webpack-bundle-analyzer] 35s ## 第三次构建 ![](https://img.kancloud.cn/68/71/68717ba4bc3f370c7947004c9382196c_837x461.png) * [speed-mesure-webpack-plugin + hard-source-webpack-plugin + webpack-bundle-analyzer] 7s