前言

因为我的一个vue项目首页打开加载了好久，所以决定优化一下。发现是打包体积太大了，页面才加载慢主要是第三方库。
优化着优化着就想要更好一点，于是逛博客搜索，参照了几个博主的解决方法整理出一下几点。

一、防止编译文件中出现map文件

在 config/index.js 文件中将productionSourceMap的值设置为false.

二、使用CDN加载第三方库

在打包后发现chunk-vendor.js 文件占用内存特别大，这里面主要是使用的一些第三方库，例如 vue-router,axios，elementUI ，echarts等文件。
通过在index.html 中直接引入第三方资源来缓解我们服务器的压力，其原理是将我们的压力分给了其他服务器站点。
推荐外部的库文件使用CDN资源：
bootstrap CDN：https://www.bootcdn.cn
Staticfile CDN：https://www.staticfile.org
jsDelivr CDN：https://www.jsdelivr.com
75 CDN：https://cdn.baomitu.com
UNPKG：https://unpkg.com
cdnjs：https://cdnjs.com

使用方法

第一步 在index.html文件中引入第三方库

第二步 去vue-config文件中去配置externals,写上你已经在index.html中引用了cdn的库。

三、图片资源压缩以及使用图片懒加载

可以用精灵图等减少http请求

四、vue-router 路由懒加载

懒加载即组件延迟加载，通常vue的页面在运行后进入都会有一个默认的页面，而其他未显示的页面只有在点击后才需要加载出来，实现按需请求，从而减少第一次加载的时候耗时。

懒加载路由配置：

const xxx= () => import('@/pages/xxx')

五、gzip压缩

前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。
第一步
命令行执行：npm i compression-webpack-plugin -D
第二步
在webpack的dev开发配置文件中加入如下代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [new CompressionWebpackPlugin()
]

六、前端代码优化

合理使用v-if和v-show
使用定时器和回调函数等记得销毁
避免意外的全局变量
适当使用闭包避免内存泄漏

vue项目首屏加载过慢解决方案相关推荐

vue项目首屏加载优化
1.将第三方资源使用cdn引入将项目中用到的一些第三方库通过cdn的方式引入的话,在打包的时候就不需要对第三方库进行打包,自然就减小了包的大小,首屏加载的时候所加载的内容也就减少了,加载时间就少了. ...
vue项目首屏加载慢解决方案
项目场景: 近期项目打包上线后,首屏加载速度太慢.记录一下优化的步骤; 解决方案: 一.开启Nginx压缩参考知乎文章 vue-cli3项目开启gzip压缩 - 知乎下图已经是开启了 Nginx ...
vue项目首屏加载过久处理笔记
1.启用gz 配置: 服务器开启gzip 会生成 gz 文件,现代浏览器基本都支持,会读取gz文件,. 开启配置:https://blog.csdn.net/baidu_35407267/articl ...
[vue] SPA首屏加载速度慢的怎么解决？
[vue] SPA首屏加载速度慢的怎么解决? 1.通过Gzip压缩 2.使用路由懒加载 3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小 ...
记前端项目首屏加载优化（网络篇）
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
Vue：首屏加载页实现
众所周知vue项目通常首屏加载会非常慢,在浏览器加载资源时,可以在首屏加入一个loading页面. 首先找到在根目录下的 /pulic/index.html: 在 index.html 中找到我们的i ...
Vue - 网站首屏加载等待动画（极简解决方案）
效果图前言解决白屏等待方案非常多,个人而言评判好坏的标准即用最少最简单的代码实现相同的功能. 在 Vue 项目中,网站加载时会显示自定义动画(CSS),当文件加载完毕且页面显示时自动移除动画. ...
vue实现首屏加载等待动画避免首次加载白屏尴尬
为什么80%的码农都做不了架构师?>>> 0 直接上效果图 1背景,用户体验良好一直是个重要的问题. 2怎么加到自己项目里面? 复制css html代码到自己的index.ht ...
VUE 首屏加载时间优化
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...

vue项目首屏加载过慢解决方案

前言