概述

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

参考资料:

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;
}

import 和组件库按需引入的更多相关文章

  1. [转] 组件库按需加载 借助babel-plugin-import实现

    前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容 ...

  2. 组件库按需加载 借助babel-plugin-import实现

    前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容 ...

  3. vue-cli3.0安装element-ui组件及按需引入element-ui组件

    在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用) (https://www.cnblogs.com/xzqyun/p/10780659.html) 上面这个链接是vue-cli3.0 ...

  4. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  5. 基于Vue的npm组件库

    前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...

  6. 手把手教你搭建自己的Angular组件库 - DevUI

    摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...

  7. 如何快速为团队打造自己的组件库(上)—— Element 源码架构

    文章已收录到 github,欢迎 Watch 和 Star. 简介 详细讲解了 ElementUI 的源码架构,为下一步基于 ElementUI 打造团队自己的组件库打好坚实的基础. 如何快速为团队打 ...

  8. 如何写一个自己的组件库,打成NPM包,并上传到NPM远程

    1.首先使用vue create my_project 构建一个自己的Vue项目 2.vue.config.js和package.json配置如下,做了些修改 const path = require ...

  9. vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小

    1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g52013 ...

随机推荐

  1. composer之predis

    安装:   composer require predis/predis   即可 predis是PHP连接Redis的操作库,由于它完全使用php编写,大量使用命名空间以及闭包等功能,只支持php5 ...

  2. git 命令解析

    git 补丁 Git 提供了两种补丁方案:   (1)用 git diff 生成的UNIX标准补丁.diff文件:.diff文件只是记录文件改变的内容,不带有commit记录信息,多个commit可以 ...

  3. windows pip使用国内源

    在这里我使用清华源来做示范 win+R 打开用户目录%HOMEPATH%,在此目录下创建 pip 文件夹,在 pip 目录下创建 pip.ini 文件, 内容如下, 在pip文件夹里新建的pip.in ...

  4. GPT-2,吓坏创造者的「深度造假写手」

    简评: 今年二月份刷屏的 GPT-2 着实厉害,那个生成续写故事的例子更是效果好到吓人一跳,它到底有多厉害,本文略微讲讲.更详细的信息可参考文末 OpenAI 的博客链接. 你能从下面这两段文字里品味 ...

  5. 条件随机场CRF介绍

    链接:https://mp.weixin.qq.com/s/BEjj5zJG3QmxvQiqs8P4-w softmax CRF主要用于序列标注问题,可以简单理解为是给序列中的每一帧,既然是分类,很自 ...

  6. Thiago2(TPO AI.ROSTO):集成式AI换脸软件(Autodesk Flame)

    如标题一样,Thiago2 是一款集成式AI换脸软件(TPO AI.ROSTO),需要与Autodesk Flame结合使用,从demo来看完成度还是很高的,算是一种完全GUI版的DeepFaceLa ...

  7. gdb命令小结

    GDB命令小结 gdb <filename> : 调试指定程序文件 r : run 的简写,运行被调试程序, 如果此前没有下过断点,则执行完整个程序:如果有断点, 则程序暂停在第一个可用断 ...

  8. create-react-app踩坑记

    前言 哇,不的不说这个react 这个脚手架create-react-app脚确实有很多问题,哈哈,下面来看看吧有哪些坑: 引用sass或者less 记得16年还是几年是不支持sass,和less的, ...

  9. Django 视图层和模板层

    目录 一.网站首页和404页面的路由配置 1. 网站首页路由 2. 404页面 二.Django视图层 1. 小白必会三板斧 (1)HttpResponse (2)render (3)redirect ...

  10. mysql视图创建

    create or replace view partner_v as select a.id,vendorname,address,nation,contactperson,tel1,tel2,jy ...