首屏加载优化方案

1、vue-router 路由懒加载

const Test = () => import("@/components/Test.vue");

2、使用CDN加速，将通用库从vendor进行抽离

cdn：构建在现有的网络基础上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

• vue项目build之后，vendors有1M多，会导致首屏加载慢的问题

• vendor会把dependencies中的依赖统一打包，导致vendors.js文件过大

• 像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有必要打包到vendor.js中

1. 在index.html中引入,

   <!-- 首屏优化，使用cdn引入外部文件 -->
   <!-- vue主要的js文件-->
   <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
   <!-- element-ui的文件 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!--  组件库引入-->
   <script src="https://cdn.bootcss.com/element-ui/2.15.2/index.js"></script>
   <script src="https://cdn.bootcss.com/vue-router/3.5.1/vue-router.min.js"></script>
   <script src="https://cdn.bootcss.com/axios/0.21.1/axios.min.js"></script>
   

2. vue.config.js配置外部文件

   configureWebpack:{
       externals: {
           'vue':'Vue',
           'vue-router':'VueRouter',
           'axios':'axios',
           'element-ui':'Element',
       }
   }
   

3. main.js不用导入elementui，因为是全局引入，需要的直接使用就行

   // import ElementUI from "element-ui";
   // import "element-ui/lib/theme-chalk/index.css";
   // Vue.use(ElementUI);
   

   去掉import … from …

   • vsc装了一个eslint插件，死活报错，卸了之后就不会报Vue未定义的错误了

   // import Vue from "vue";
   // Vue.use(VueRouter);
   
   // import Vue from 'vue';
   // Vue.use(Vuex);
   

4. 结果：小了一半

vue-cli3搭建项目之webpack配置 https://blog.csdn.net/u014440483/article/details/87267160

3、Nginx开启Gzip功能

可以使网站的js、css、xml、html文件在传输的时候进行压缩，提高访问速度。Gzip的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后浏览器解压并解析。现在大多数浏览器都支持Gzip

4、异步组件

• 定义：异步组件就是定义的时候什么都不做，只在组件需要渲染的时候进行加载缓存，以备下次访问

• 异步获取数据，在你需要执行的时候回调一个resolve

  https://cn.vuejs.org/v2/guide/components-dynamic-async.html

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f8MnF7Ec-1624414139024)(picture/image-20210622215048135.png)]

maybe就是路由懒加载的原理

5、服务端渲染SSR

https://ssr.vuejs.org/zh/

浏览器端渲染CSR（client side render）：页面上的内容时加载js文件渲染出来的，js文件运行在浏览器上，服务端只返回一个html文件

服务器端渲染SSR（server side的render）：页面上的内容都是由服务器端渲染生成，浏览器直接显示返回的html就可以了

6、按需加载UI库

import { Dialog, Select, Option, OptionGroup, Input, Tree, Row, Col } from 'element-ui'

但是ui库可以通过cdn引入的话就不用使用按需引入了

7、webpack开启gzip压缩

1. 安装compression-webpack-plugin插件，直接安装会直接安装最高版本，指定低版本安装

   npm install --save-dev compression-webpack-plugin@1.1.12
   

2. vue.config.js配置文件

   const CompressionPlugin = require("compression-webpack-plugin")
   
   configureWebpack:{
   		plugins: [
   			new CompressionPlugin({
   					test: /\.(js|css)(\?.*)?$/i,//需要压缩的文件正则
   					threshold: 10240,//文件大小大于这个值时启用压缩
   					deleteOriginalAssets: true//压缩后不保留原文件	
                   	//这里改成true后的确会不保留原文件，但是本地跑的时候找不到rendors.js文件，会报错
   			})
   		]
    }
   

3. 结果

整个dist已经被压到416KB

坑点

deleteOriginalAssets: true//压缩后不保留原文件	

这里配置不保留原文件后，只有.gz，没有.js，本地跑的时候还是会找.js文件，所以还是设成false，部署服务器要怎么搞就没试过了

8、图片懒加载减少占用带宽

尝试了一下，死活都时加载错误 #&&#%$#%%^

<el-image  style="width: 100%;" fit="fill" :src="require('@/assets/img/banner.png')"></el-image>

9、页面使用骨架屏

Skeleton Screen 是指在页面数据加载完成之前，先给用户展示出页面的大致结构（灰色占位图）

vue中使用

1. 在模板文件id=app容器中写入要展示的 html

   <div id="app">
       <div>首屏加载中。。。</div>
   </div>
   

2. 在模板文件id=app容器中写入要展示的 图片

3. 使用vue ssr提供的webpack插件（需要用到再补充把）

10、js脚本使用异步和延迟

功能独立且不要求马上执行的js文件可以使用async，优先级低且没有依赖的js，加入defer

window的performance查看性能