关于export和export default你不知道的事

CarlBenjamin 发布于2019-08-23 16:06 / 1479人阅读

摘要：网上有很多关于和的文章，他们大部门都是只讲了用法，但是没有提到性能，打包等关键的东西。比如某个业务文件夹下的，用的时候用方便识别，不用重复在的中添加，也可以用方法提示。如果一个文件兼有以上需求可以同时和

网上有很多关于export和export default的文章，他们大部门都是只讲了用法，但是没有提到性能，打包等关键的东西。
大家应该应该能理解import * from "xxx"会把文件中export default的内容都打包到文件中，而import {func} from "xxx" 只会把文件中的func导入，这样势必export会比export default打包的少。看例子

utils.js

const func1 = () => {
    console.log("func1");
}

const func2 = () => {
    console.log("func2");
}

export default {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import common from "./common";

class Index extends Component {
  render() {
    common.func1();
    return (
      123456
    );
  }
}

render(, document.getElementById("app"));

用这种export default的方法那么打包的文件会是怎么样的呢？我们看看

我们发现整个文件被打包了

用另一种方式
utils.js

const func1 = () => {
    console.log("func1");
}

const func2 = () => {
    console.log("func2");
}

export {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import {func1} from "./common";

class Index extends Component {
  render() {
    func1();
    return (
      123456
    );
  }
}

render(, document.getElementById("app"));

结果：

只打包了func1

综上export default确实可能会打包更多不需要的内容，但是在某些场景用export default更好。
所以总结如下：

1.当文件存放着很多方法，变量不同场景需要引用不同方法，请用export
2.当类只有某几个方法，并且每次引用都需要用到里面的大部分方法，请用export default，
  毕竟还有方法提示
3.当值导出一个方法，类请用export default
4.如果一个文件只会被某一个其他文件的子文件，不会被其他文件引用，并且其中的方法都会被用到，
  考虑用export default。比如某个业务文件夹下的action.js，用的时候用import api from "./action";
  方便识别，不用重复在import的{}中添加，也可以用方法提示。
4.如果一个文件兼有以上需求 可以同时export和export default

GPU云服务器云服务器 Exporting exported exports exporter

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102688.html

简述vue-router实现原理

摘要：源码解读阅读请关注下代码注释打个广告哪位大佬教我下怎么排版啊，不会弄菜单二级导航扑通是什么首先，你会从源码里面引入，然后再传入参数实例化一个路由对象源码基础类源码不选择模式会默认使用模式非浏览器环境默认环境根据参数选择三种模式的一种根据版 router源码解读阅读请关注下代码注释打个广告：哪位大佬教我下sf怎么排版啊，不会弄菜单二级导航（扑通.gif） showImg(https:...

Cristalven 2019-08-23 15:21 评论0 收藏0
简述vue-router实现原理

摘要：源码解读阅读请关注下代码注释打个广告哪位大佬教我下怎么排版啊，不会弄菜单二级导航扑通是什么首先，你会从源码里面引入，然后再传入参数实例化一个路由对象源码基础类源码不选择模式会默认使用模式非浏览器环境默认环境根据参数选择三种模式的一种根据版 router源码解读阅读请关注下代码注释打个广告：哪位大佬教我下sf怎么排版啊，不会弄菜单二级导航（扑通.gif） showImg(https:...

Ajian 2019-08-02 14:17 评论0 收藏0
[译]你并不知道Node

摘要：问题什么是调用栈并且它是的一部分么调用栈当然是的一部分。为什么理解是重要的因为你在每个进程中只能获取一个调用栈。它是一个从事件队列中跳去事件的循环并且将它们的回调压入到调用栈中。当调用栈为空的时候，事件循环可以决定下一步执行哪一个。你并不知道Node 原文：You don’t know Node 译者：neal1991 welcome to star my articles-tra...

miqt 2019-08-21 16:49 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0