Vue项目优化

Vue项目的性能优化

• v-for key

设置key，更快定位数据与diff
diff流程    用户操作|数据操作了 -> 派发通知 -> 打补丁patch(oldVnode， Vnode) 虚拟节点

• 模块化、组件化 封装具有高度复用性的模块 拆分高度复用性的组件 组件可配置性强

• 路由懒加载

首屏加快渲染

component: () => import(xx.vue)

• productionSourceMap 脚手架配置 config的index.js 生产环境设置false 用来生成map文件、定位源码

• productionGzip 脚手架配置 config的index.js，依赖服务器要有gzip的配置 设置为true，启用gzip压缩功能，打包体积更小

• keep-alive

缓存组件

<keep-alive include="需要缓存的组件">
    <router-view />
<keep-alive>

• 插件尽量使用CDN 插件UI库等使用CDN引入，在webpack里面注册。减少依赖和打包体积

• 图片CDN、图片懒加载、使用CSS图标 图片使用CDN引入 犀牛|阿里云|腾讯云 图标使用CSS图标 图片懒加载 VueLazyload 插件

• 组件按需导入

Vue.use(MyUI, { components: { MyBtn } })

MyUI.install = function (Vue, options) {
    Vue.mixin({
        components: (options && options.components) || {
            MyBtn, MyInput
        }
    })
}

import { Button } from "element-ui"