项目场景：

近期项目打包上线后,首屏加载速度太慢.记录一下优化的步骤;

解决方案：

一.开启Nginx压缩

参考知乎文章 vue-cli3项目开启gzip压缩 - 知乎

下图已经是开启了 Nginx 进行 gzip压缩后的效果;依旧很慢.

二.屏蔽生产环境的source map

vue.config.js中设置:

 productionSourceMap: false,

三.echarts改为 CDN 引入 :

从压缩体积图可以看出 echarts 占用的体积也很多; 所以先对echarts进行优化:

1. 在public/index.html中引入 :

  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.common.js"></script>

2. 在 vue.config.js 中 configureWebpack 配置 externals

外部扩展(Externals) | webpack 中文文档

externals : 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

configureWebpack : 有2种写法,一种是函数式,一种是对象的形式(参考官网)

我司项目中使用的是函数式的写法,且vue/cli是使用的3.x版本,而3.x版本中没有externals 的配置项,所以需要使用新增属性的形式添加;代码如下

 configureWebpack: config => {config['externals'] = {echarts: 'echarts'}},

3. 在vue组件中直接使用 echarts 即可.

此时再来看打包的体积 :

对比之前小了大概2M多.再看上图中还有很多体积比较大的组件同样可以采用上述方法改cdn加载.

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

vue项目首屏加载过慢解决方案
前言因为我的一个vue项目首页打开加载了好久,所以决定优化一下.发现是打包体积太大了,页面才加载慢主要是第三方库. 优化着优化着就想要更好一点,于是逛博客搜索,参照了几个博主的解决方法整理出一下几点 ...
vue项目首屏加载优化
1.将第三方资源使用cdn引入将项目中用到的一些第三方库通过cdn的方式引入的话,在打包的时候就不需要对第三方库进行打包,自然就减小了包的大小,首屏加载的时候所加载的内容也就减少了,加载时间就少了. ...
vue项目首屏加载过久处理笔记
1.启用gz 配置: 服务器开启gzip 会生成 gz 文件,现代浏览器基本都支持,会读取gz文件,. 开启配置:https://blog.csdn.net/baidu_35407267/articl ...
项目遇到的问题总结（四）：单页面首屏加载慢解决方案
项目遇到的问题总结(四):单页面首屏加载慢解决方案参考文章: (1)项目遇到的问题总结(四):单页面首屏加载慢解决方案 (2)https://www.cnblogs.com/myfirstboke/ ...
[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项目首屏加载慢解决方案