Vue项目性能优化与实践

Vue项目代码规范

参考官方网站的风格指南，里面详细阐述了命名规范、组件规范、属性使用建议等，这里就不一一详述。

实用的封装

共用的逻辑可以使用mixins来载入

接口请求封装成service层

CSS预处理器按照页面组件进行分离与合并引入

组件（包括自定义组件和第三方组件）按需引入

使用webpack-bundle-analyzer分析应用性能

【webpack-bundle-analyzer文档】
可以使用这个插件来分析应用性能，进而知道哪个组件、插件和业务逻辑等体积过大，影响页面体验。然后做针对性的分析。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

• 如下可以清晰地看到各业务组件的文件大小

比较好的实践

for循环设置key

路由最好设置webpack打包名称

灵活地使用keep-alive

一些不需要经常更新的组件可以实用keep-alive进行缓存，从而节省性能。
**

图片按需加载

v-if和v-show选择性实用

防抖与节流的应用

打包去掉sourceMap

避免路由缓存

<router-view :key="$route.fullpath"></router-view>

合并组件祖册

import Vue from 'vue'
function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}
const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夹下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  )
  Vue.component(componentName, componentConfig.default || componentConfig)
})

compute与watch的合理使用

巧用render函数

把组件颗粒度降到最低，结合react的设计思想，组合组件

巧用slot

**

合理组织好Vuex store