vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢。居然需要21s,体验极差。
这是打包的结果截图
根据这种情况,进行了一下优化:
一、路由懒加载
结合Vue的异步组件再结合webpack的代码分割,我们可以轻松的实现路由懒加载。路由懒加载的实现有几种方法,这里我就使用了 resolve。
这一种方法较常见。它主要是使用了 resolve 的异步机制,用 require 代替了
import,实现按需加载。如下:
修改router./index.js文件之前
修改之后
进行一次打包 npm run build:
发现打包的结果有了变化,对比一下开始时候的的chunk-vendors,体积减小了大概700k,但是还是太大了。需要继续优化。
二、服务器开启Gzip
Gzip是GNU zip的缩写,是一种压缩技术。它将浏览器请求的文件先在服务器端进行压缩,然后传递给浏览器,浏览器解压之后再进行页面的解析工作。在服务端开启Gzip支持后,我们前端需要提供资源压缩包。
通过 CompressionWebpackPlugin插件进行打包的时候压缩
安装插件 cnpm i --save compression-webpack-plugin
修改vue.config.js文件:
打包效果如图:
看到 Gzipped那一列,发现Gzip已经把文件减少了2/3了。
接下来,就是需要开启一下服务端的Gzip
修改nginx.conf配置文件:(一般在 /etc/nginx/ngin.conf)
找到该文件,配置如下:
修改之后,别忘了重启一下nginx, 进入带nginx的安装目录下(一般在:/usr/sbin),执行 ./nginx -s reload。
到了这一步,gzip基本已经优化完成。
让我们来继续优化
三 、去除console来减少文件大小
安装 uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
配置vue.config.js:
如果代码中有很多log,优化就会很明显了。
上面三种就是我使用的首屏加载优化的方法,让我们放到服务器上面看下效果
可以发现,相比之前的首屏加载速度还是提升了不少的。
小结
以上就是我使用的三种首屏优化方式,当然,首屏优化方式还不止这些,还可以用到的方法有:静态资源、不常用改动的js库可以使用CDN加速;ssr服务端渲染;通过webpack配置避免组件重复打包;从代码层面去减少代码量(提高代码复用率)等等方法,需要以后去钻研一下。
以上是关于vue首屏优化的全部内容,希望对大家的学习有所帮助。
vue路由懒加载_优化vue项目的首屏加载速度相关推荐
- nginx加载图片慢_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
- webpack优化系列七:首屏加载优化
前端项目打包之后默认情况下的配置文件较大,部署后首次加载反应较慢,甚至会出现几秒白屏的现象,对于用户的体验感不是很好,所以需要进一步优化一下: 本文主要记录一下本人自己的理解,如果其他方案可评论指导. ...
- java中项目启动时加载_如何在项目启动时,加载或解析某配置文件
在web项目中有很多时候需要在项目启动时就执行一些方法,而且只需要执行一次,比如:加载解析自定义的配置文件.初始化数据库信息等等,在项目启动时就直接执行一些方法,可以减少很多繁琐的操作. 在工作中遇到 ...
- Vue:首屏加载页实现
众所周知vue项目通常首屏加载会非常慢,在浏览器加载资源时,可以在首屏加入一个loading页面. 首先找到在根目录下的 /pulic/index.html: 在 index.html 中找到我们的i ...
- vue“路由懒加载” 技术,让网页快速加载 (优化篇)
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载 所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
- 图片懒加载和Vue路由懒加载
图片懒加载 什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
- Vue 路由懒加载和动态加载
什么是路由懒加载? 不同组件有不同的 js 文件,当访问相应组件的时候才会加载其相应的js文件,而不是在首页统一加载,这样就优化了首页渲染的时间,提高页面首次渲染时间: 路由懒加载的原理? 底层是一个 ...
- vue路由懒加载的两种方式
1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...
- Vue路由懒加载报错问题解决
使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理 解决办法: 安装babel用来编译import异步引用 ...
最新文章
- DDD 领域驱动设计-如何 DDD?
- Android开源项目
- 小知识系列:数据库的主键和外键
- c,c++中字符串处理函数strtok,strstr,strchr,strsub
- Postman用法简介-Http请求模拟工具
- .network 中文文档_以太坊链下支付网络Raiden API中文文档
- ajax之jsonp跨域请求
- 谷歌发布 MediaPipe Holistic,实现移动端同时进行人脸、手部和人体关键点检测跟踪...
- java中调用数组参数_java中如何调用带有数组类型参数的存储过程
- sdk开发包怎么使用_怎么使用 Buildroot 构建根文件系统?
- 多少开发人员 饿了么_饿了么CPS新社交电商,2020年的创业新风口
- Python 多线程基本步骤
- python 登录接口测试_Python接口测试——post请求(登录接口)
- 数学建模实验——举重模型的matlab实现
- 使用turtle绘图:绘制“点“:dot()绘制“标记“:stamp()
- Ubuntu CURL下载报错:curl: (77) error setting certificate verify locations:
- 微博相册图片获取工具
- 从实体密保卡到动态口令令牌
- 亿玛大数据揭秘“钻石网购密码” 最高单价超15万
- WebAPI中 request.query、request.body
热门文章
- android竖直和横向,如何在android中为纵向和横向模式定义不同的控件
- Flink中的Time与Window
- maven 聚合工程 用spring boot 搭建 spring cloud 微服务 模块式开发项目
- Angular CLI的简单使用(1)
- 解决克隆clone github 仓库速度过慢的问题
- 【尺取或dp】codeforces C. An impassioned circulation of affection
- Oracle 控制文件管理
- 外网访问FTP服务,解决只能以POST模式访问Filezilla的问题
- asp.net 的页面几种传值方式
- “函数调用的左操作数”的理解