Vue之不完美的极致优化

Vue之不完美的极致优化

如果我们的项目是用脚手架搭建的，大部分的优化脚手架都帮你做了。比如：图片转base64、代码压缩等。

我今天想说的是一些要自己去优化的地方：

• 第三方按需加载，比如：Element按需加载，用了哪些组件就之引入哪些组件。

  // main.js
  import { Button, Select } from 'element-ui';
  
  Vue.component(Button.name, Button);
  Vue.component(Select.name, Select);
  // 或写为
    Vue.use(Button)
    Vue.use(Select)

• CDN引入： 可以把一些文件或者第三方库采用CDN的方式引入。比如：Vue、VueX、VueRouter等。

  在index.html 文件中通过script 标签引入CDN，最后再Webpack中配置一下，打包的时候不要把通过CDN引入的文件或者第三方库打包进去。

  // webpack配置
  externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter'
    },

• 路由懒加载

  // webpackChunkName是把组件按组分块，后面接的字符串是块的名称
  const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
  const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
  const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
  
  const router = new VueRouter({
    routes: [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar },
      { path: '/baz', component: Baz },
    ]
  })

• 异步组件

  new Vue({
    // ...
    components: {
      'my-component': () => import('./my-async-component')
    }
  })

• 尽量少的并且合理的使用Watch、computed。比如：你只是想监听对象里面一个key的变化，就没必要监听整个对象。因为这会增加依赖的数量，增加开销。
• Object.freeze() 冻结只是用来展示的数据，Vue就不会把数据转换成响应式的，从而减少依赖的数量，提升性能。
• 服务器渲染或者预渲染。可以参考这篇文章：Vue SSR指南。
• 当页面过于复杂时，可以把模块拆分成组件，模块需要的功能，在组件内部来实现，可以完美配合异步组件使用。
• 把组件的css卸载一个单独的文件内，再在组件内引入。组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。