Vue之不完美的极致优化

Vue之不完美的极致优化

若是咱们的项目是用脚手架搭建的，大部分的优化脚手架都帮你作了。好比：图片转base6四、代码压缩等。

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

• 第三方按需加载，好比：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 动态注入。