Vue.js是一个流行的前端框架。与react.js和angular.js相比，vue.js的起步曲线更加平滑，无论掌握多少都可以快速起步。然而，单页应用程序也有其缺点，有时第一屏加载很慢。今天我们就来聊聊如何用vue cli3.x有效缓解这个问题！

方法一路由延迟加载

第一屏加载慢的原因是单页应用需要在路由表上加载整个页面，路由的惰性加载就是为了解决这个问题。如果我们能够将不同路由对应的组件划分为不同的代码块，然后在访问路由时加载相应的组件，效率会更高。以下是vue路由的延迟加载的具体示例。方法很简单。如果不想多了解，就按照这个格式介绍路线。如果你对路由延迟加载感兴趣，请到vue-router路由延迟加载

方法2组件按需加载

为什么按需加载组件？原因也很简单。一些组件库包含丰富的组件。如果我们直接引入它们，不可避免地会引入一些我们根本不用的组件。这样的话，体积会很大，我们也不专业。因此，有必要根据需要引入它。让我们以iview组件库为例，了解一下按需引入的过程。

1.首先介绍了按需加载工具babel-plugin-import

Babel-plugin-import是Babel，编译时会自动将import的写法转换成按需导入的方式。

NPM安装巴别塔-插件-导入-保存-dev2。创造。项目根目录中的babelrc文件，并配置为按需加载内容

{'plugins' : [['import '，{'library name' :' iview '，' library directory ' : ' src/components ' }]} 3。配置要在main.js中加载的组件

以下是iview的示例

这里需要注意的是，全球注册的组件需要挂在vue原型上。例如，如果我们需要使用Notice组件，那么我需要

Vue.prototype. $ Notice=Notice这样，我们就可以正常使用iview的组件了。

方法3使用CDN加速策略

在Vue项目中，项目中引入的所有js和css文件在编译时都会打包成vendor.js，所以vendor.js文件的体积会相当大，会影响第一次打开的体验。解决方法是将引用的外部js和css文件分开，不编译成vendor.js，而是以资源的形式引用，这样浏览器就可以使用多线程异步加载vendor.js和外部js，从而加快第一次打开的速度。外部库文件可以使用CDN资源。vue cli3.x和vue cli2.x在cdn配置上有一些区别。升级后，vue cli的代码结构发生了很大变化，配置文件集成到了vue.config.js文件中。下面以amap、axios、qs为例，介绍如何使用cdn加载资源。

1.介绍index.html相关的cdn资源

2.配置外部

vue cli3.x配置webpack位于vue.config.js的configureWebpack中

配置完成后，我们可以正常使用全局Amap、axios和Qs

方法四使用压缩-webpack-plugin将文件打包成gzip格式

Compression-webpack-plugin是一个生成。npm运行构建中的gz文件。之后，项目访问的文件是这样的。gz文件，而项目的正常包量会减少一半以上。很悬吗

让我们进一步描述这个依赖的使用过程。

1.1 .国家预防机制简介

NPM install compression-web pack-plugin-save-dev 2 . vuecli 3 . x在vue.config.js中配置web包

3.nginx打开gzip模式

前一步已经配置好前端，然后nginx协同打开gzip模式。这个比较简单。只要你对nginx有一点了解，我们在nginx.conf中配置了一些http中的代码

4.验证配置是否成功

这个步骤很简单，只需检查块类文件的响应头的内容编码是否是gzip

以上就是解决vue第一屏加载慢的一些方法。希望这篇文章能帮你解决问题。谢谢你。也希望大家多多支持我们。