如何優化咱們的代碼（vue項目）

前言

做爲一個前端，可能絕大多數的時間都是在寫的業務代碼，時間一長，你們會以爲乏味、沒意思等等，可是其實就算只是寫業務代碼，咱們也依然可以找到有興趣的點，說的簡單一點就是代碼優化，不只僅侷限在業務邏輯這塊，像是代碼複用、效率等等都是咱們能夠加以改進的地方，學會在業務代碼中找到不足，總結經驗，這樣日積月累，量變產生質變，必然咱們的技術也是不斷再上升的。今天其實就是說下我本身在vue項目中進行的一些總結或者是經驗，若是有錯誤的地方也是歡迎你們指正。

1.兼容IE11

用過vue的同窗們應該都比較清楚，vue實際上是能夠兼容ie9的，可是這種兼容並非說，你寫了一個項目，打開ie9就能兼容了，是須要用工具將代碼進行轉換的。我以前也是這樣覺得的，直到近期一個項目完成以後，打開ie11，發現頁面顯示正常的，可是全部的http請求都是無效的，通過了一番查找，才知道這個babel-polyfill的包的用處，固然知道的同窗能夠略過啦，不知道的話，跟着我繼續往下看

咱們使用現代瀏覽器的話，不少像是es七、es8的語法，可能都是已經支持了，可是放在ie上，這些方法都是統統不認識的，所以咱們就須要一個工具來將這些ie瀏覽器不認識的語法轉換成ie所認識的，那麼知道了這個babel的包，其實就很簡單了，咱們直接這樣在vue中的main.js中引入這個包便可

import "babel-polyfill";
複製代碼

可是這樣引入的話，在打包的時候，包可能會比較大，會影響到前端頁面的打開速度，因此又出現了一種按需轉譯的用法，即當咱們須要用到轉譯代碼的時候，會替咱們轉譯，並非一次轉譯全部的代碼，這種用法同窗們應該也是很是熟悉了，就是所謂的「懶加載」，和vue的路由懶加載是一個道理，那麼如何使用呢，首先下載的是一個@babel/polyfill的包，這個包的話也是一個翻譯代碼的做用，可是能夠進行配置來實現按需加載

npm i @babel/polyfill -D
複製代碼

而後咱們須要在babel.config.js中進行按需加載的配置

presets: [
    '@vue/app',
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry'
      }
    ]
]
複製代碼

注意這個@babel/preset-env是一個有關環境變量的包，這個包在你使用vue腳手架3.0建立項目時就會自帶這個包了，因此是不須要下載的，最後在main.js中引入咱們以前下載的包就能夠了。

import "@babel/polyfill";
複製代碼

這樣就大功告成了，打包的話也能夠看到打包體積變小了

對比能夠看到體積小了20kb，可是問題來了，明顯在主包中文件體積過大，已經1.5M了，這個體積頁面首次打開的時候，可能會須要3-10秒的時間，用戶體驗確定是極差的，因此下面咱們也說到如何按需加載咱們的組件，注意咱們vue項目使用的是ant-design-vue的ui框架，所謂按需加載組件，就是咱們項目中用到了這個組件才導入這個組件，沒有用到的話，就不要將這個組件的內容打包進去，也包括組件的樣式。

2.按需打包組件

其實關於按需打包咱們須要的組件，不少組件也介紹如何按需使用，ant-design-vue也提供了這些內容，想要詳細瞭解的同窗能夠點開連接查看文檔，這裏也是簡單說一下，首先須要下載babel-plugin-import的插件，而後須要在babel.config.js中進行以下配置

plugins: [
    [
      "import",
      {libraryName: "ant-design-vue",libraryDirectory: "es",style: true}
    ]
  ]
複製代碼

以後的話，咱們就不能全局引入組件了，而是引入咱們項目中所用到的一些組件，能夠將這些引入的組件單獨放入一個js文件中，這樣方便之後添加組件

//index.js
import Vue from 'vue';
import {
    Button,
    Row,
    Col,
    Layout,
    Menu,
    Icon,
    Form,
    Tag,
    Input
} from 'ant-design-vue';

Vue.use(Button)
Vue.use(Row)
Vue.use(Col)
Vue.use(Layout)
Vue.use(Menu)
Vue.use(Icon)
Vue.use(Form)
Vue.use(Tag)
Vue.use(Input)
//也能夠這樣寫，可是這樣寫比較麻煩
// Vue.component(Button.name,Button)
// Vue.component(Row.name,Row)
// Vue.component(Col.name,Col)
// Vue.component(Layout.name,Layout)
// Vue.component(Layout.Header.name,Layout.Header)
// Vue.component(Layout.Sider.name,Layout.Sider)
// Vue.component(Layout.Footer.name,Layout.Footer)
// Vue.component(Layout.Content.name,Layout.Content)
// Vue.component(Menu.name,Menu)
// Vue.component(Icon.name,Icon)
// Vue.component(Form.name,Form)
// Vue.component(Tag.name,Tag)
// Vue.component(Form.Item.name,Form.Item)
// Vue.component(Input.TextArea.name,Input.TextArea)
複製代碼

而後咱們再來打包看看此時的文件大小

一會兒少了近500kb，是否是好了不少呢，固然若是包體積仍是比較大，這個時候咱們能夠考慮將一些依賴排除在打包當中，使用external的配置，這裏就很少說了，有興趣的同窗能夠本身試試。

3.自定義組件的v-model指令

說完了若是優化打包，咱們再來看看如何提升咱們的代碼質量。v-model這個指令相信你們也都用過，它雙向綁定的機制是否是很是省事呢，若是咱們本身要實現一個v-model綁定又該如何作呢，好比咱們須要監聽某個富文本編輯器內容的變化，獲取內容以及保存富文本的內容，這個時候就恰好用上自定義的v-model

<template>
  <div class="hello">
    <editor :id="id" :min-height="500" width="100%" :content="editor"
            @on-content-change="onContentChange"></editor>
  </div>
</template>

<script>
export default {
  name: 'kindeditor',
  model: {
    prop: 'editor',
    event: 'content-change'
  },
  props: {
    editor: String,
    id: String
  },
  data () {
    return {}
  }
  methods: {
    onContentChange (val) {
      this.$emit('content-change',val);
    }
  }
}
</script>
複製代碼

其實關鍵就在model屬性上，定義了父組件傳過來的props，以及發生變化的事件名稱，須要注意的地方在於，當內容發生改變時，咱們不能將改變後的值賦給props屬性，由於vue中默認是單向數據流，props的值只能是由父組件來改變，這樣的話，咱們就能輕易的監聽這個富文本編輯器的值，而不用去用watch監聽或者是其餘的方法來實現，這個實現的方法在vue的文檔中也有提到，你們也能夠去文檔查看詳情。

4.條件語句優化

在咱們的項目中確定是有無數的if條件語句的代碼，若是條件嵌套很少的話，那沒什麼問題，若是嵌套過多過深，就會致使代碼難以理解，維護困難，所以針對條件語句的優化也是勢在必行的，這裏也是參考了不少大佬們的文章，吸收他們的經驗，使用一些比較經常使用的方法來優化條件語句，好比錯誤優先處理return

this.form.validateFields((err,values) => {
     if (err) {
        this.$message.warning('驗證失敗，請從新輸入！');
        return;
     }
     let fileId = values.fileId.map(item => {
         return item.response.result
     });
     let params = Object.assign(values,{
        govUserId: sessionStorage.getItem('userId'),
        fileId: fileId.slice(-1)
     })
    this.resSubmit(params)
});
複製代碼

這樣一個表單驗證的方法，當若是發生錯誤時，直接提示錯誤信息，而後退出驗證，少了一個else的代碼塊，代碼更少一些，並且也很容易理解

另外比較經常使用的就是利用三目運算符，以及短路操做符「&&」和「||」，好比

this.panes.length > 1 && this.$store.commit('DELETE_TAB',key);
//或者是
this.panes.length > 1 ？ this.$store.commit('DELETE_TAB',key) : '';
複製代碼

除此還有上面文章中提到的更復雜的條件判斷，使用新的數據結構Map來進行判斷，而全部這些條件語句，都是咱們代碼當中須要優化的地方。

5.解構賦值以及函數默認值的應用

解構賦值是ES6當中的內容，如今ES10都已經出來了，若是ES6尚未用上的話，那就顯得咱們前端太low啦，固然這只是開個玩笑，不過ES6所帶來的解構賦值以及函數默認值都是可以簡化咱們的代碼，使代碼更容易理解，因此既然咱們學習ES6了，那麼就必需要學以至用。

//給參數添加默認值，當參數爲undefined的時候，則使用默認的參數值
async getData(currentPage = 0,pageSize = 10) {
    //將請求的結果賦值給一個對象，而且給對象中的每一個屬性都取了一個名字，後面直接可使用這個變量進行操做，而不須要用.語法
      let {response,username,timeToken,govUserId} = await this.$store.dispatch('getSign'),
      params = {
        sign: response.result.sign,
        username,
        timeToken,
        govUserId,
        currentPage,
        pageSize
      }
 }
複製代碼

解構和函數默認值看起來好像比較複雜，可是用熟悉了之後，會發現少寫了不少代碼，而且代碼看起來也是一目瞭然，同時默認值還幫助咱們省去了關於參數的判斷，是否是很是的方便的呢。

6.在vue中使用JSX

一直以來，我覺得只有react中才能使用JSX，後來發現其實咱們在vue中也能使用JSX，須要注意的是JSX在vue中和react中仍是有一點區別的，這裏不會具體說這些區別，只是告訴你們，遇到一些複雜的組件，能夠去嘗試使用JSX來寫，也是一種解決問題的方法

render () {
    return (
      <div class="apply_list">
        <a-table columns={this.columns}
          size="small" 
          dataSource={this.dataSource}
          pagination={this.pagination}
          loading={this.loading}
          rowKey={(record,index) => index}
          onChange={this.handleTableChange}
          locale={{emptyText: '暫無數據'}}
        >
        </a-table>
      </div>
    )
}
複製代碼

JSX在vue中，是寫在render（）鉤子中的，直接返回return一個JSX對象就能夠了，網上也有關於vue中的JSX怎麼使用，你們能夠去搜搜。

寫在最後

好久好久沒有寫博客了，不僅是由於工做忙的緣由，還有本身懶的因素在裏面，人若是在溫馨區待過久的話，總會慢慢去的磨滅了本身的初衷，本身的目標，所以也是但願經過寫博客來提醒本身，不斷學習，不斷積累，技術是沒有任何捷徑可走，而我走的已經比別人慢了不少，因此還須要繼續努力丫。

最後上面提到的代碼，都在個人github上面，最近工做關係使用ant-design-vue的ui框架，而後就漸漸喜歡了這個框架，感受它更加靈活好用，而且設計也比較漂亮，你們能夠對照這個人項目和官方的文檔來進行學習喲。