關(guān)于export和export default你不知道的事

CarlBenjamin 發(fā)布于2019-08-23 16:06 / 1476人閱讀

摘要：網(wǎng)上有很多關(guān)于和的文章，他們大部門都是只講了用法，但是沒有提到性能，打包等關(guān)鍵的東西。比如某個業(yè)務(wù)文件夾下的，用的時候用方便識別，不用重復(fù)在的中添加，也可以用方法提示。如果一個文件兼有以上需求可以同時和

網(wǎng)上有很多關(guān)于export和export default的文章，他們大部門都是只講了用法，但是沒有提到性能，打包等關(guān)鍵的東西。
大家應(yīng)該應(yīng)該能理解import * from "xxx"會把文件中export default的內(nèi)容都打包到文件中，而import {func} from "xxx" 只會把文件中的func導(dǎo)入，這樣勢必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的方法那么打包的文件會是怎么樣的呢？我們看看

我們發(fā)現(xiàn)整個文件被打包了

用另一種方式
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"));

結(jié)果：

只打包了func1

綜上export default確實可能會打包更多不需要的內(nèi)容，但是在某些場景用export default更好。
所以總結(jié)如下：

1.當(dāng)文件存放著很多方法，變量不同場景需要引用不同方法，請用export
2.當(dāng)類只有某幾個方法，并且每次引用都需要用到里面的大部分方法，請用export default，
  畢竟還有方法提示
3.當(dāng)值導(dǎo)出一個方法，類請用export default
4.如果一個文件只會被某一個其他文件的子文件，不會被其他文件引用，并且其中的方法都會被用到，
  考慮用export default。比如某個業(yè)務(wù)文件夾下的action.js，用的時候用import api from "./action";
  方便識別，不用重復(fù)在import的{}中添加，也可以用方法提示。
4.如果一個文件兼有以上需求 可以同時export和export default