import 和组件库按需引入

概述

今天查资料查到了一些有趣的东西，记录下来，供之后开发时参考，相信对其余人也有用。

参考资料：

import、require、export、module.exports 混合使用详解

从 import 讲起

import { button, Select } from 'element-ui'这段代码到底发生了什么？

babel 会将这段代码进行转码，转码以后是这个样子：

var a = require('element-ui');
var Button = a.Button;
var Select = a.Select;

因此，就算咱们只想使用 element-ui 的 button 和 Select 这2个组件，可是实际上，咱们把整个 elment-ui 库引入进来了。

babel-plugin-component 作了什么

咱们知道，在 element-ui 的文档里面强调，若是要使用按需加载，就要使用 babel-plugin-component 库。那么 babel-plugin-component 库又作了什么？简单来讲，它把上面的代码转化成了下面的样子：

import Button from 'element-ui/lib/button'
import Select from 'element-ui/lib/select'

这样就只会引入 Button 和 Select 这两个组件了。

相似的，e-charts 在按需引入组件的时候是这么引入的，也是同样的道理。

import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/chart/effectScatter';
import 'echarts/lib/chart/treemap';

因此，全部支持按需引入的库，均可以用上面的方法进行按需引入组件。

一个问题

若是咱们有一个需求，就是在 app 加载的时候不引入 element-ui 库，而后在/admin这个路由下面才引入 element-ui ,那要怎么作呢？

在 main.js 使用各类形式的按需加载确定是不行的，由于会打包进入 app.js 里面去，从而在初次加载 app 的时候加载。

在/admin这个路由下，各个组件用到 element-ui 的组件的时候，各自按需加载。这个方法是可行的，可是很是繁琐，每次用到 element-ui 的组件都须要引入一下，而后挂载一下。

我选择的方法是，在/admin这个路由的组件下面，按需加载所有须要的 element-ui 组件，示例代码以下：

// admin.element.js
import Vue from 'vue';
import Row from 'element-ui/lib/row';
import Col from 'element-ui/lib/col';
import Table from 'element-ui/lib/table';
import TableColumn from 'element-ui/lib/table-column';
import Button from 'element-ui/lib/button';
import Footer from 'element-ui/lib/footer';
import Form from 'element-ui/lib/form';
import FormItem from 'element-ui/lib/form-item';
import Input from 'element-ui/lib/input';
import Menu from 'element-ui/lib/menu';
import Submenu from 'element-ui/lib/submenu';
import MenuItem from 'element-ui/lib/menu-item';
import Loading from 'element-ui/lib/loading';
import Message from 'element-ui/lib/message';

const components = [
  Row,
  Col,
  Table,
  TableColumn,
  Button,
  Footer,
  Form,
  FormItem,
  Input,
  Menu,
  Submenu,
  MenuItem,
];
components.forEach((component) => {
  Vue.component(component.name, component);
});

Vue.use(Loading.directive);
Vue.prototype.$message = Message;

内存泄漏

粗看上面的代码是没有问题的，可是仔细想的话，若是每次跳转到/admin路由下面的话，那不是每次都会安装引入的这些组件吗？那若是跳转屡次就会安装屡次，形成内存泄漏啊~~~

虽说 Vue 自己的插件安装机制已经避免了这种状况，可是咱们仍是建议加上一行判断代码：

import Vue from 'vue';
import Row from 'element-ui/lib/row';
import Col from 'element-ui/lib/col';
import Table from 'element-ui/lib/table';
import TableColumn from 'element-ui/lib/table-column';
import Button from 'element-ui/lib/button';
import Footer from 'element-ui/lib/footer';
import Form from 'element-ui/lib/form';
import FormItem from 'element-ui/lib/form-item';
import Input from 'element-ui/lib/input';
import Menu from 'element-ui/lib/menu';
import Submenu from 'element-ui/lib/submenu';
import MenuItem from 'element-ui/lib/menu-item';
import Loading from 'element-ui/lib/loading';
import Message from 'element-ui/lib/message';

// hack: 防止屡次引入致使内存泄漏
if (!Vue.hasAdminPageImportedElement) {
  const components = [
    Row,
    Col,
    Table,
    TableColumn,
    Button,
    Footer,
    Form,
    FormItem,
    Input,
    Menu,
    Submenu,
    MenuItem,
  ];
  components.forEach((component) => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);
  Vue.prototype.$message = Message;

  Vue.hasAdminPageImportedElement = true;
}