vue项目首屏优化都可以做哪些？路由懒加载、组件分包懒加载、图片懒加载、js资源异步加载、gzip压缩、cdn、三方库按

路由懒加载、组件分包懒加载、图片懒加载、js资源异步加载、gzip压缩、cdn、三方库按需引入

1、路由懒加载、路由异步加载

打包时会将每个路由页面拆分成单独的 js 资源，同时跳转到对应页面才会加载对应路由的 js 资源。

 // 路由懒加载
 {
    path: "/about",
    name: "about",
    component: () => import(/* webpackChunkName: "about" */ "../views/About.vue"),
  }
  
 // 路由异步加载
 {
    path: "/about",
    name: "about",
    component: () => import("../views/About.vue"),
  },

2、组件分包懒加载

有时候首页可能包含很多的组件，导致打包后的页面资源过大。可以考虑对组件分包，然后懒加载。

第一步：路由分包

其实与路由懒加载类似，就是异步引入组件，这一步操作后，每个异步引入的组件会被打包成单独的资源文件。

export default {
  name: "HomeView",
  components: {
    TestCom: () =>
      import(/* webpackChunkName: "TestCom" */ `@/components/TestCom.vue`),
  },
};

第二步：组件被分包后，可以对其进行懒加载。

首页组件太多，我们希望是页面底部等一些不在视野内的组件资源，进入视野后再加载。实现原理同上面的图片懒加载。

<vue-lazy-component>
  <template scope="scope">
      <TestCom v-if="scope.loading"></TestCom>
  </template>
</vue-lazy-component>

3、图片懒加载

首页在加载时，加载了还没有进入视野的图片资源。使用图片懒加载，等图片进入视野后才会加载图片资源

1）VueLazyComponent 一个带插槽的公共组件，进入视野后再加载资源

// main.js
import VueLazyComponent from "@xunlei/vue-lazy-component";
Vue.use(VueLazyComponent);


// 业务页面内
 <vue-lazy-component>
    <img src="../assets/test.png" alt="" />
 </vue-lazy-component>

2）vue-lazyload，使用更简单一些

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
 
// 或者 with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

// 业务页面内
<img v-lazy="img.src" >

4、js资源异步加载

在项目开发时，会在html文件中引入很多第三方js资源，会导致文档解析时间延长。类似下面：

  <html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/1.js"></script>
    <script src="https://unpkg.com/2.js"></script>
    <script src="http://lib.baomitu.com/3.js"></script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

可以采用异步加载的方式，异步加载不会影响文档流的解析，下面介绍3种方式：

1）支持异步加载的可以将js资源设置为异步加载。

async：异步加载js，js加载完后立即执行，多个js执行顺序不固定。
defer：异步加载js，解析 document后，按js文件顺序以此执行。

<script type="text/javascript" src="./js/testPage.js" async></script>
//或
<script type="text/javascript" src="./js/testPage.js" defer></script>

2）符合ES Module 规范的资源，可以采用import异步载入。

在需要使用的页面异步引入，就不用在入口文件加载了：

import("xxx.js").then((module) => { console.log(module); });

3）其他规范的js可以采用异步添加`script`标签的方式载入。

5、gzip压缩

如果 Nginx 服务器开启 gzip，会将静态资源在服务端进行压缩，压缩包传输给浏览器后，浏览器再进行解压使用，这大大提高了网络传输的效率，尤其对 js，css 这类文本的压缩，效果很明显。

6、cdn

7、三方库按需引入

对三方库的引用务必使用按需加载，不需要的组件就不要引入进来。优化时将 Element-UI 常用的组件在 main.js 中按需引入。

import { Container, Menu } from 'element-ui';

Vue.use(Container);
Vue.use(Menu);

vue项目首屏优化都可以做哪些？