Vue项目性能优化实战总结,7个实用方法

你知道你的项目的首次加载时间需要多久吗?你有给自己的项目做过性能优化吗?

据统计53%的用户不会等待超过3秒就会关闭掉网页,所以对于项目的性能优化尤为的重要。

闲话少说,今天我们来详细了解如何优化Vue项目的性能。

分析项目bundle大小

打包后的文件大小直接影响我们访问的加载速度,所以我们要知道哪些打包文件存在性能问题。

查看bundle大小主要有两种方法

report

使用webpack-bundle-analyzer来生成一个报告,可以清晰直观的看出每个打包后文件的大小

我们在Vue项目的package.json文件中加入下面的命令

"build-report": "vue-cli-service build --report"

然后,在命令行中运行

npm run build-report

等待一段时间后,会在dist文件中生成一个report.html文件,我们在浏览器中打开它

image-20211014204030329

build

在本地使用build打包命令

npm run build

然后看终端的输出信息

image-20211014214919867

可以看到主要的文件从大到小的排序

在查看完关键的信息后,我们可以做一些优化手段

1. 懒加载模块

比如Echarts图标的包和编辑器的包,都是很大的有45百kb,但并不是所有的页面都需要图表和编辑器,只有少量页面需要,所以我们可以把Echarts和编辑器放到需要的页面中去加载,不要放到全局里面,这样其他页面就省去加载他们的时间。

要查看浏览器加载文件的顺序,我们打开浏览器的开发者工具,点击Network,勾选上Disable cache,这样不会从浏览器的缓存中去加载文件,然后重新去刷新页面,可以看到所有文件的加载顺序

image-20211014205215500

一般我引入模块是这样写

// demo.js
const Demo = {
   
   
  testDemo: function () {
   
   
    console.log("这是DEMO")
  }
}
export default Demo

// app.js
import Demo from './demo.js'
Demo.
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值