你知道你的项目的首次加载时间需要多久吗?你有给自己的项目做过性能优化吗?
据统计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文件,我们在浏览器中打开它
build
在本地使用build打包命令
npm run build
然后看终端的输出信息
可以看到主要的文件从大到小的排序
在查看完关键的信息后,我们可以做一些优化手段
1. 懒加载模块
比如Echarts图标的包和编辑器的包,都是很大的有45百kb,但并不是所有的页面都需要图表和编辑器,只有少量页面需要,所以我们可以把Echarts和编辑器放到需要的页面中去加载,不要放到全局里面,这样其他页面就省去加载他们的时间。
要查看浏览器加载文件的顺序,我们打开浏览器的开发者工具,点击Network,勾选上Disable cache,这样不会从浏览器的缓存中去加载文件,然后重新去刷新页面,可以看到所有文件的加载顺序
一般我引入模块是这样写
// demo.js
const Demo = {
testDemo: function () {
console.log("这是DEMO")
}
}
export default Demo
// app.js
import Demo from './demo.js'
Demo.