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文件，我们在浏览器中打开它

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.