如何优化咱们的代码（vue项目）

时间 2019-11-17

标签如何优化咱们代码 vue 项目繁體版

原文原文链接

前言

做为一个前端，可能绝大多数的时间都是在写的业务代码，时间一长，你们会以为乏味、没意思等等，可是其实就算只是写业务代码，咱们也依然可以找到有兴趣的点，说的简单一点就是代码优化，不只仅局限在业务逻辑这块，像是代码复用、效率等等都是咱们能够加以改进的地方，学会在业务代码中找到不足，总结经验，这样日积月累，量变产生质变，必然咱们的技术也是不断再上升的。今天其实就是说下我本身在vue项目中进行的一些总结或者是经验，若是有错误的地方也是欢迎你们指正。前端

1.兼容IE11

用过vue的同窗们应该都比较清楚，vue实际上是能够兼容ie9的，可是这种兼容并非说，你写了一个项目，打开ie9就能兼容了，是须要用工具将代码进行转换的。我以前也是这样觉得的，直到近期一个项目完成以后，打开ie11，发现页面显示正常的，可是全部的http请求都是无效的，通过了一番查找，才知道这个babel-polyfill的包的用处，固然知道的同窗能够略过啦，不知道的话，跟着我继续往下看vue

咱们使用现代浏览器的话，不少像是es七、es8的语法，可能都是已经支持了，可是放在ie上，这些方法都是统统不认识的，所以咱们就须要一个工具来将这些ie浏览器不认识的语法转换成ie所认识的，那么知道了这个babel的包，其实就很简单了，咱们直接这样在vue中的main.js中引入这个包便可react

import "babel-polyfill";
复制代码

可是这样引入的话，在打包的时候，包可能会比较大，会影响到前端页面的打开速度，因此又出现了一种按需转译的用法，即当咱们须要用到转译代码的时候，会替咱们转译，并非一次转译全部的代码，这种用法同窗们应该也是很是熟悉了，就是所谓的“懒加载”，和vue的路由懒加载是一个道理，那么如何使用呢，首先下载的是一个@babel/polyfill的包，这个包的话也是一个翻译代码的做用，可是能够进行配置来实现按需加载git

npm i @babel/polyfill -D
复制代码

而后咱们须要在babel.config.js中进行按需加载的配置github

presets: [
    '@vue/app',
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry'
      }
    ]
]
复制代码

注意这个@babel/preset-env是一个有关环境变量的包，这个包在你使用vue脚手架3.0建立项目时就会自带这个包了，因此是不须要下载的，最后在main.js中引入咱们以前下载的包就能够了。vue-cli

import "@babel/polyfill";
复制代码

这样就大功告成了，打包的话也能够看到打包体积变小了npm

对比能够看到体积小了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文件中，这样方便之后添加组件bash

//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)
复制代码

而后咱们再来打包看看此时的文件大小babel

一会儿少了近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框架，而后就渐渐喜欢了这个框架，感受它更加灵活好用，而且设计也比较漂亮，你们能够对照这个人项目和官方的文档来进行学习哟。