网上有很多关于 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。比如某个业务文件夹下的 action.js，用的时候用 import api from ‘./action’;
方便识别，不用重复在 import 的 {} 中添加，也可以用方法提示。
4. 如果一个文件兼有以上需求 可以同时 export 和 export default