關於export和export default你不知道的事

網上有不少關於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(<Index />, 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(<Index />, 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