如何实现Vue-Cli项目中的优化操作？

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

起源：由Vue-Cli（2.X）生成的Vue项目问题：首屏加载过慢，编译资源过大等操作：对项目进行相应优化，提升响应速度和性能

起源

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

操作

路由懒加载

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

import HelloWorld from '@/components/HelloWorld'

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

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

然后重新编译即可

开启预加载/优先加载

使用webpack插件PreloadWebpackPlugin 进行预加载prefetch和优先加载preload。 主要做的是用preload加载vendor、manifest与app三个js而用prefetch去加载所有路由对应的文件。