Vue首屏加载速度优化，提升80%以上

最新推荐文章于 2025-04-15 22:26:03 发布

Liaochjser

最新推荐文章于 2025-04-15 22:26:03 发布

阅读量8.3k

点赞数 7

分类专栏： vue 文章标签： vue.js 前端 vue

本文链接：https://blog.youkuaiyun.com/liaoxianhua888/article/details/124253036

版权

本文介绍了Vue项目中优化首屏加载速度的多种策略，包括第三方库的分离打包、路由懒加载、图片资源压缩、启用Gzip压缩以及Webpack配置优化等。通过这些方法，成功将vendor.js文件从1M以上优化到256K，提升了页面渲染速度，实现了秒开效果，显著改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。可以看个例子：

这是优化前的页面加载状态：执行npm run build打包项目，出来的vendeor.js文件，基本都是1M以上的的巨大文件，没有用户能忍受5s以上的loading而不关闭页面的，如图所示：

当项目在挂载到服务器上，平均都是10S以上加载出来，好家伙这加载时间，仿佛过了半个世纪，很烦人，心态boom, 开发者甚至都有种想砸电脑的冲动（·#*@#￥……&*）！

1. 首先安装webpack的可视化资源分析工具，命令行执行：

npm i webpack-bundle-analyzer -D

2. 然后在webpack的dev开发模式配置中，引入插件，代码如下：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [
    new BundleAnalyzerPlugin()
]

3. 最后命令行执行npm run build --report