如何通过长尾词策略优化Vue-Cli项目操作流程？

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

来源：由Vue-Cli（2.X）生成的Vue项目

问题：存在首屏加载过慢，编译资源过大等问题

操作：主要针对这些问题对项目进行相应的优化，提升项目响应速度，优化项目性能。操作包括：

+ 路由懒加载+ 使用V预加载

起源

由Vue-Cli（2.X）生成的Vue项目中存在着首屏加载过慢，编译资源过大等问题，主要针对这些问题对项目进行相应的优化，提升项目响应速度，优化项目性能。

操作

路由懒加载

在Vue-router官方文档中有针对懒加载的介绍,主要是将整个大的js进行切片，对当前路由的资源进行一个按需加载。在Vue-cli生成的路由组件引用方法是这样的

import HelloWorld from '@/components/HelloWorld'

只需将组件的引用方式改为

const HelloWorld = () => import ('@/components/HelloWorld')

然后重新编译即可

开启预加载/优先加载

使用webpack插件PreloadWebpackPlugin 进行预加载prefetch和优先加载preload。