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