VUE性能优化----关于elementUi的按需引入

我们的思想是elementUi的组件需要单独放在自己的文件中单独管理

达到按需引入，减少elementui体积包的大小，达到性能优化

1.引入所需要的组件

　import Vue from 'vue'

import {
  Switch,
  Divider,
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  DatePicker,
  Popover,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Icon,
  Row,
  Col,
  Upload,
  Collapse,
  CollapseItem,
  Cascader,
  Tag,
  MessageBox,
  Message,
  Scrollbar,
  Drawer,
  Descriptions,
  DescriptionsItem
} from 'element-ui'

2.使用

按照官方的说法。为以下的使用方式

Vue.component(Button.name, Button);

所以我们可以定义对象，遍历去使用组件

const components = {
  Switch,
  Divider,
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  DatePicker,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Popover,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Icon,
  Row,
  Col,
  Upload,
  Collapse,
  CollapseItem,
  Cascader,
  MessageBox,
  Message,
  Tag,
  Scrollbar,
  Drawer,
  Descriptions,
  DescriptionsItem
};

const Elementui = (Vue, config = {}) => {
  if (Elementui.installed) {
    return;
  }
  Object.keys(components).forEach((key => {
    Vue.component(components[key].name, components[key]);
  }))
　 // 对于一些组件的封装
  Vue.prototype.$msgbox = MessageBox;
  //   Vue.prototype.$message = Message;
  Vue.prototype.$msg = function (options) {
    let iconcls;
    if (options.type === 'error') {
      iconcls = '#icon-cuowu'
    } else if (options.type === 'warning') {
      iconcls = '#icon-jinggao1'
    } else {
      iconcls = '#icon-chenggong'
    }
    const msg = Message({
      dangerouslyUseHTMLString: true, // 将dangerouslyUseHTMLString属性设置为 true，message 就会被当作 HTML 片段处理。
      message: `
        <svg class="icon svg-icon titleicon" aria-hidden="true">
            <use xlink:href="${iconcls}"></use>
        </svg>
        <p class="el-message__content">${options.msg}</p>
        `,
      duration: options.duration || 2000,
      center: true
    })
    return msg
  }
}

　Vue.use(Elementui);

3.在main.js入口文件在直接引入

//ElementUI按需引入（注意是自己的路径）
import '@/moduleSet/elementui.js';

4.重要：需要配置babel-plugin-component

VUE为babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    // vxe-table的按需加载  npm install babel-plugin-import -D
    [
      "import",
      {
        "libraryName": "vxe-table",
        "style": true // 样式是否也按需加载
      },
      "@babel/plugin-syntax-dynamic-import" // 路由的动态加载需要
    ],
    // element的按需加载  npm install babel-plugin-component --save-dev
    [
      "component",
      {
        libraryName: "element-ui",
　　     // 此处为样式文件，默认的是theme-chalk，我这里使用了elementui的自定义主题
        styleLibraryName: "~element-#287BB5",
      }
    ],
    // echarts的按需加载  npm install babel-plugin-equire -D
    "equire"
  ],
}