如何通过长尾关键词优化Vue首页界面加载速度？

本文共计1086个文字，预计阅读时间需要5分钟。

目录

1.路由懒加载

2.JS资源异步加载

3.图片懒加载

4.组件分包懒加载

在视口才加载

1.路由懒加载

问题：项目在打包时，会将首页与其他页面的资源打包到同一个资源文件中，造成首屏现象。

目录

• 1、路由懒加载
• 2、js 资源异步加载
• 3、图片懒加载
• 4、组件分包懒加载-在视口才加载

1、路由懒加载

问题： 项目在打包时会将首页与其他页面的资源打包到同一个资源文件，造成首页加载的资源文件过大。

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

{ path: "/about", name: "about", component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"), },

2、js 资源异步加载

问题： 在开发项目的时候，可能会在入口文件加载很多的第三方 js 资源。类似下面这种：

解决方法： 为处理这种入口文件多余的js，下面介绍三种方式。

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

async：异步加载js，js加载完后立即执行，多个js执行顺序不固定。