问题

今天写项目看到一个问题很有意思。先抛出一个问题，哪个写法性能高？

a.js:

export const a = '1';
export const b = '2';
export const c = '3';
export const d = '4';

b.js:

import {a, b} from './a';
console.log(a, b);

a.js:

export const a = '1';
export const b = '2';
export const c = '3';
export const d = '4';

b.js:

import * as obj from './a';

console.log(obj.a, obj.b);

a.js

export default {
    a: '1',
    b: '2',
    c: '3',
    d: '4'
}

b.js

import obj from './a';

console.log(obj.a, obj.b);

这个问题对于没有深刻了解过 webpack 打包原理机制的我来说还真的有点迷了。所以决定这段时间去好好研究一波。

测试

我们的测试很简单：

配置一个 webpack4 的环境

建立了 a.js, b.js 然后就这么写，然后打包，就这么简单。

a.js

b.js

a.js

b.js

a.js

b.js

在development 模式下我们看到第一种和第二种写法打包出来完全一样.至于第三种，其实就是包了一层 default Object。再来一张图。

感谢各位评论，尤其异次元的废D 大佬，我似乎确实忽略了一个东西 tree shaking。这是一种 webpack 的打包优化机制，详细信息请移步至 Webpack Tree shaking 深入探究、尤大大他们的回答

当我换成 production 时可以看出 1、2写法其实也没有什么区别。并且是直接赋了值：

；

第三种写法，是用了一个对象，所以当然会全部将变量打包进去。

。

异次元的废D 大佬更推荐第一种写法。观点是，不应该依赖打包工具的优化而去改变。我其实赞同。

但我这种观点就目前的这个例子来说，我觉得各有利弊。

如果您有更深刻的理解欢迎评论。分享无罪，欢迎组队