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 動態注入。