vue项目性能优化：分享几点常规法则

当我们做完vue项目的时候，经常会考虑去优化的，今天我们分享几点常规法则，便于大家少走弯路吧。

// 导入Vue.js
import Vue from 'vue';

// 关闭Vue.js的生产提示
Vue.config.productionTip = false;

// 创建Vue实例
new Vue({
  // 挂载到id为app的DOM元素上
  el: '#app',
  // 数据
  data: {
    message: 'Hello Vue!'
  },
  // 模板
  template: '<div>{{ message }}</div>'
});

// 使用Vue.js的生产版本
Vue.config.productionTip = true;

// 使用CDN引入Vue.js的生产版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

// 使用keep-alive缓存组件
<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

// 使用v-once指令缓存静态内容
<span v-once>{{ staticContent }}</span>

// 使用v-for指令的key属性提高渲染效率
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

// 使用v-if和v-show指令根据需要渲染组件
<template>
  <div>
    <div v-if="showComponentA">
      <component-a></component-a>
    </div>
    <div v-show="showComponentB">
      <component-b></component-b>
    </div>
  </div>
</template>

// 使用异步组件提高首屏加载速度
Vue.component('async-component', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div>Async Component</div>'
    });
  }, 1000);
});

// 使用路由懒加载提高页面加载速度
const Foo = () => import('./Foo.vue');
const Bar = () => import('./Bar.vue');

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
});

// 使用webpack的代码分割功能提高页面加载速度
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

大家可以试试吧。