记录前端优化

vue项目组件按需加载（element-ui）

1、安装 babel-plugin-component npm install babel-plugin-component -D 2、将.babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3、然后引入部分组件，这样一来，就不需要引入样式了，插件会帮我们处理。 // main.js import Vue from 'vue' import { Dialog, Loading } from 'element-ui'

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用组件

vue项目打包体积过大优化

在通过 build 命令后得到项目文件发现体积很大，其实这是由于在打包时生成了.map 文件，去除 .map 文件可以提升 build 速度，也可以保护源码。 在vue.config.js中

module.exports = {
  productionSourceMap: false
};

防抖

function debounce(func, wait) {
    let timeout;
    return function () {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            func()
        }, wait);
    }
}

节流

function throttle(func, delay) {
    var prev = Date.now();
    return function() {
        var context = this;
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    }
}

element-ui 分页器二次封装

子组件

<script>
export default {
  name: "PagingQuery",
  props: {
    pager: {
      type: Object,
      required: true
    },
    props: {
      type: Object,
      required: false,
      default: () => ({
        page: "page", // 第几页
        rows: "rows", // 显示条数
        total: "total" // 总记录条数
      })
    }
  },
  computed: {
    total() {
      return this.pager[this.props.total] || 0;
    },
    // 检测获取到的数据是否为空
    isEmptyList() {
      return (
        Math.ceil(this.pager[this.props.total] / this.pager[this.props.rows]) <
        this.pager[this.props.page]
      );
    }
  },
  watch: {
    total() {
      // 存在记录但未获取到数据时, 重新请求
      if (this.pager[this.props.page] > 1 && this.isEmptyList) {
        this.$emit(
          "setPager",
          Object.assign(this.pager, {
            [this.props.page]: this.pager[this.props.page] - 1
          })
        );
        this.$emit("query");
      }
    }
  },
  methods: {
    // 每页条数
    onChangeSize(rows) {
      const temp = {
        [this.props.rows]: rows,
        // 当显示条数小于或等于总条数时，重置页数
        [this.props.page]: rows <= this.total ? 1 : this.pager[this.props.page]
      };

      this.$emit("setPager", Object.assign(this.pager, temp));
      // 触发父组件查询请求
      this.$emit("query");
    },
    // 翻页
    onChangePage(page) {
      this.$emit(
        "setPager",
        Object.assign(this.pager, { [this.props.page]: page })
      );
      this.$emit("query");
    }
  }
};
</script>

父组件

    <paging-query :pager="pager" @query="query" @setPager="setPager" />
    data() {
        return {
          pager: {
            total: 0,
            page: 1,
            rows: 15
          }
        };
    },
    //分页方法
    query() {
      let reqData = {};
      reqData.page_size = this.$data.pager.rows;
      reqData.page_number = this.$data.pager.page;
      this.reqlist(reqData);
    },
    setPager(pager) {
      this.$data.pager = pager;
    }