vue项目首次加载慢的解决方案及webpack优化

场景：后台管理系统，遇到首页加载很慢的问题，技术栈是 vue全家桶 + elementUI + echarts 。首次加载大概需要40s，页面才能出来。

解决方案：

1、 vue-router 路由懒加载

在这里插入图片描述

2、使用CDN加载
首先，在index.html下引入cdn
其次，在build/webpack.base.conf.js文件中配置，和引入的对应

整个项目都在这个index.html页面展示的
实际上在app这个div里展示不同的组件
在这里插入图片描述

3、防止编译文件中出现map文件
config/index.js 文件中设置 productionSourceMap 为 false

在构建生产环境版本时是否开启source map。
在这里插入图片描述

4、去掉代码中的console.log
在项目中的build/webpack.prod.conf.js文件中

在这里插入图片描述