vue页面首次加载缓慢原因及解决方案

第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。

解决方案一：

1. 去掉编译文件中map文件。在编译好后，我们会看到文件夹下有特别多的.map文件，这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不生成这些文件。
   在 vue.config.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件 （文件大小 35MB-->10.5MB）。
2. vue-router 路由懒加载
   懒加载即组件的延迟加载，通常vue的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份，从而减少第一次加载的时候耗时。
   懒加载路由配置：

image.png

解决方案二：

使用CDN减小代码体积加快请求速度

1. 为什么使用CDN

使用CDN主要解决两个问题：

1. 打包时间太长、打包后代码体积太大，请求慢
2. 服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题

2. 具体步骤

1. 首先我们要使用 Vue CLI（@vue/cli）自带的 webpack 包体积优化工具，它可以查看各个模块的 size 大小，方便优化。注意：网上很多说要先安装 webpack-bundle-analyzer 包，其实不需要安装。

修改vue.config.js添加这行代码：

image.png

根据上面的配置后，运行 npm run build后，打开后如下图，我们可以看到 ElementUI 和 Echarts 占用较大，直接打包了 node_modules 里面框架的内容。

image.png

2.将element、echart等都改外部引用，在/index.html中引入CDN

注意:修改配置后还是提示Element未定义，是因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式.

3. 修改vue.config.js中配置，添加externals属性(详见https://webpack.docschina.org/configuration/externals/)，其中键是项目中引用的，值是所引用资源的名字。需要注意的是资源名需要查看所引用的JS源码，查看其中的全局变量是什么，例如element-ui的全局变量就说ELEMENT

image.png

4. 删除原先的important
   如果不删除原先的import，项目还是会从node_modules中引入资源。
   也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。

image.png

打包优化前后对比

image.png