概述

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

参考资料:

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. 6.纯css绘制叮当猫

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. vue history模式 ios微信分享坑

    vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...

  3. 使用CXF开发WebService程序的总结(四):基于bean的客户端和服务端代码的编写

    1. 在原服务端项目 ws_server中添加两个bean 1.1 添加两个类  User 和 Clazz   package com.lonely.pojo; public class User { ...

  4. Hash介绍

    Hash,一般翻译做"散列",也有直接音译为"哈希"的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出,该输出就 ...

  5. 用户吐槽不断:Android 10.0没法用

    如果你升级到Android Q第三个测试版的话,那么最近是不是被设备不断重启搞崩溃了,事实上也确实如此,因为有很多用户都遇到了类似的情况,大家吐槽谷歌的声音越来越大. 不少用户发现,自己设备升级至An ...

  6. CentOS 7.4 下安装部署Nagios监控系统详细攻略(三)

    Nagios是一个流行的电脑系统和网络监控程序,它检测主机和服务,当异常发生和解除时能提醒用户.它是基于GPLv2开发的开源软件,可免费获得及使用. nagios工作原理 nagios的功能是监控服务 ...

  7. MySQL优化建议与使用规范

    适用场景:并发量大.数据量大的互联网业务;可以先阅读必须掌握的MySQL优化指南 一.基础规范 (1)必须使用InnoDB存储引擎 解读:支持事务.行级锁.并发性能更好.CPU及内存缓存页优化使得资源 ...

  8. linux 上搭建sftp服务

    原文链接:https://www.cnblogs.com/yanduanduan/p/9046723.html sftp和ftp的区别 FTP是一种文件传输协议,一般是为了方便数据共享的.包括一个FT ...

  9. 【mysql】利用全文索引实现中文的快速查找

    现在我们数据库表中的记录大约在17万,每一条记录都有name字段,根据name做模糊匹配,效率非常低下. 表结构如下: create table T ( id int, name ) ); 总数据量如 ...

  10. C#与JAVA的互通

    C#与JAVA的互通 https://blog.csdn.net/sinat_35165183/article/details/68936910