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"
  ],
}