浅谈 记一次 import 打包 印象误区

1,445 阅读2分钟

问题

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

  • 第一种写法

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 然后就这么写,然后打包,就这么简单。

  • "webpack": "^4.26.1"

  • "webpack-cli": "^3.1.2"

上图

第一种

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 大佬 更推荐第一种写法。观点是,不应该依赖打包工具的优化而去改变。我其实赞同。

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

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