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

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

项目优化，是一个老生常谈的问题。这里简单总结一下相关方法：

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

2.路由懒加载。单页应用把渲染内容都放在js里面，下载到本地，然后渲染，如果不使用懒加载，那页面第一次加载时下载的文件会比较大，首屏加载会比较慢。使用懒加载后，生产环境下使用webpack分割打包代码，除了公用的js部分，路由组件js代码只会在该页面加载时才从服务器获取。懒加载在路由数据里配置，示例：

   {
        path: '/refreshpage',
        name: 'RefreshPage',
        component: () => import(/* webpackChunkName: "RefreshPage" */ '../views/refresh-page/refresh-page.vue'),
},

即使用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以内。

5.UI框架库按需引入。对于只用到部分组件的UI框架，才有按需引入，按需打包，减少生产环境代码体积

6.避免同一标签上使用v-for和v-if，因为v-for优先级高于v-if。

7.Vue 通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，有些数据我们不会去更新他，只是展示在页面上，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，减少劫持能够很明显的减少组件初始化的时间，可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了

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 => {
       
           config.plugins.push(
              new BundleAnalyzerPlugin({
                  analyzerMode: "disabled",
                  generateStatsFile: true,
                  statsFilename: "../stats.json"
              }),
            )
}

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

config.plugins.push(
           new CompressionWebpackPlugin()
       )

14.注意数据缓存。第一使用vuex缓存和共享数据，使用localStorage或sessionStorage缓存改变频率小的数据。公用数据使用vue缓存，检查不到数据时再调接口获取，尽量减少接口的重复调用，由于页面需要对同一接口并发调用时，注意节流，不滥刷接口，用户点击做好放连点

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

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

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

18.组件私有样式，即开启scope的样式，尽量使用class，少用标签选择器。因为大量使用元素选择器是很慢的。为了给样式设置作用域，Vue 会为元素添加一个独一无二的特性，例如 data-v-f3f3ooe。然后修改选择器，使得在匹配选择器的元素中，只有带这个特性才会真正生效