vue项目优化方案（性能，包体积，页面加载速度等）

vue项⽬优化⽅案（性能，包体积，页⾯加载速度等）

vue项⽬优化⽅案（性能，包体积，页⾯加载速度等）

项⽬优化，是⼀个⽼⽣常谈的问题。这⾥简单总结⼀下相关⽅法：

1.代码优化，代码模块化，组件分离复⽤，⼯具函数抽离，注意代码精简，v-for渲染加上key属性，for循环注意break等。

2.路由懒加载。单页应⽤把渲染内容都放在js⾥⾯，下载到本地，然后渲染，如果不使⽤懒加载，那页⾯第⼀次加载时下载的⽂件会⽐较⼤，⾸屏

加载会⽐较慢。使⽤懒加载后，⽣产环境下使⽤webpack分割打包代码，除了公⽤的js部分，路由组件js代码只会在该页⾯加载时才从服务器获

取。懒加载在路由数据⾥配置，⽰例：

{

path: '/refreshpage',

name: 'RefreshPage',

component: () => import(/* webpackChunkName: "RefreshPage" */ '../views/refresh-page/'),

},

即使⽤import动态引⼊，还可以使⽤/* webpackChunkName: "RefreshPage" */ 语法指定打包后的包名，其中RefreshPage是包名。

3.合理使⽤keep-alive，v-if和v-show。keep-alive可以缓存页⾯，使得页⾯在第⼆次打开时很快，但也不是越多越好，缓存多了也会使浏览器卡

顿。v-show最终渲染为display:none，也就是⽤css切换显⽰隐藏页⾯，页⾯第⼆次显⽰时不需要创建，会更快，然⽽，如果页⾯结构复杂，有

⼤量的组件需要显⽰隐藏，这时候如果使⽤v-show，页⾯初始加载时就会卡顿，原因是初始时加载了太多的dom，这时候使⽤v-if会更好，虽然

v-if每次都要创建页⾯，单次性能损耗会更⼤，但在初始时渲染了较少的dom。

4.减少⼤图⽚使⽤。有些UI是没有页⾯优化意识的，可能给你张轮播图，拿过来就是⼏兆（夸张了点，不过1M是正常）。这时候前端必须要有这

个意识，除⾮项⽬必须要使⽤⾼清⾼质量⼤图，否则必须让UI将图⽚给压缩到200KB以内。

框架库按需引⼊。对于只⽤到部分组件的UI框架，才有按需引⼊，按需打包，减少⽣产环境代码体积

6.避免同⼀标签上使⽤v-for和v-if，因为v-for优先级⾼于v-if。

通过 Property 对数据进⾏劫持，来实现视图响应数据的变化，然⽽有些时候我们的组件就是纯粹的数据展⽰，不会有任何

改变，有些数据我们不会去更新他，只是展⽰在页⾯上，我们就不需要 Vue 来劫持我们的数据，在⼤量数据展⽰的情况下，减少劫持能够很明显

的减少组件初始化的时间，可以通过 ⽅法来冻结⼀个对象，⼀旦被冻结的对象就再也不能被修改了

8.⽤addEventListener声明的事件，组件内使⽤的定时器，在组件销毁时不会⾃动销毁，要⼿动及时销毁。

9.图⽚过多的页⾯，为了加速页⾯加载速度，将页⾯内未出现在可视区域内的图⽚先不做加载， 等到滚动到可视区域后再去加载。也提⾼了⽤户

体验。可使⽤ Vue 的 vue-lazyload 插件

10.想要⾸屏加载更快，可以考虑ssr服务端渲染，不过后台管理系统⼀般可以不考虑ssr。⾯向C端的⽹站可以直接使⽤nuxt。

11.当使⽤单⽂件组件时，组件内的 CSS 会以 style 标签的⽅式通过 JavaScript 动态注⼊。这有⼀些⼩⼩的运⾏时开销，如果使⽤nuxt服务端

渲染，这会导致⼀段 “⽆样式内容闪烁 (fouc) ” 。将所有组件的 CSS 提取到同⼀个⽂件可以避免这个问题，也会让 CSS 更好地进⾏压缩和缓

存。

12.借助Webpack 可视化分析⼯具。来分析打包后的代码包体积，例如使⽤webpack-bundle-analyzer 。vue-cli3脚⼿架下配置⽰例：

configureWebpack: config => {

(

new BundleAnalyzerPlugin({

analyzerMode: "disabled",

generateStatsFile: true,

statsFilename: "../"

}),

)

}

13.⽣产环境开启giz压缩。这个需要后端服务器和前端同时开启。前端在中配置。

(

new CompressionWebpackPlugin()

)

14.注意数据缓存。第⼀使⽤vuex缓存和共享数据，使⽤localStorage或ssionStorage缓存改变频率⼩的数据。公⽤数据使⽤vue缓存，检查

不到数据时再调接⼝获取，尽量减少接⼝的重复调⽤，由于页⾯需要对同⼀接⼝并发调⽤时，注意节流，不滥刷接⼝，⽤户点击做好放连点

15.开启pwa缓存。这属于提升⽤户体验的优化，pwa在chome浏览器和edg浏览器上可以像访问桌⾯程序⼀样访问web应⽤。

16.列表页⾯，保存表单可以启⽤公共loading,优化⽤户体验

17.和后端的配合。在可能的情况下，尽量让后端根据页⾯返回最⼤限度适配页⾯展⽰的数据，减少前端处理数据的操作

18.组件私有样式，即开启scope的样式，尽量使⽤class，少⽤标签选择器。因为⼤量使⽤元素选择器是很慢的。为了给样式设置作⽤域，Vue

会为元素添加⼀个独⼀⽆⼆的特性，例如 data-v-f3f3ooe。然后修改选择器，使得在匹配选择器的元素中，只有带这个特性才会真正⽣效