|
主要原因：是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。可以通过安装webpack-bundle-analyzer 插件来查看打包文件的大小，可以明显的看出哪些文件比较大。解决方法如下：
1. 去掉编译文件中map文件。在编译好后，我们会看到文件夹下有特别多的.map文件，这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不生成这些文件。
在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件 。
2. vue-router 路由懒加载（又名路由按需加载）：即组件的延迟加载，通常vue的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。
3. 静态资源的处理：如图片、css、js等资源进行压缩，vue-lazyload插件，图片懒加载。
4. 组件异步加载：
加载首页的时候，可以先给首页的子组件设置v-if = “false”，在页面初始化的时候再给子组件设置为true，此方法利用了v-if的惰性，setTimeout会使子组件在所有的组件初始化完成并显示后再对其子组件进行初始化。
5. 避免重复请求。
转载：https://www.jianshu.com/p/6262772bdc9c。
转载：https://www.jb51.net/article/173628.htm。
| 
转播
