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

栏目: JavaScript · 发布时间: 5年前

内容简介:今天写项目看到一个问题很有意思。先抛出一个问题,哪个写法性能高?a.js:b.js:

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

  • 第一种写法

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

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

b.js

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

第二种

a.js

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

b.js

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

第三种

a.js

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

b.js

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

结论

我们看到 第一种 和 第二种 写法 打包出来 完全一样.至于第三种,其实就是包了一层 default Object 而已。再来一张图。

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

所以其实三种写法 并没有多大卵区别,非说有的话。。。那就是第三种多了一层 obj 吧。如果您有更深刻的理解欢迎 评论。分享无罪,欢迎组队


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Rails 5敏捷开发

Rails 5敏捷开发

[美] Sam Ruby、[美] Dave Thomas、[美] David Heinemeier Hansson / 安道、叶炜、大疆Ruby技术团队 / 华中科技大学出版社 / 2017-12-30 / 115.00

本书以讲解“购书网站”案例为主线,逐步介绍Rails的内置功能。全书分为3部分,第一部分介绍Rails的安装、应用程序验证、Rails框架的体系结构,以及Ruby语言知识;第二部分用迭代方式构建应用程序,然后依据敏捷开发模式开展测试,最后用Capistrano完成部署;第三部分补充日常实用的开发知识。本书既有直观的示例,又有深入的分析,同时涵盖了Web开发各方面的知识,堪称一部内容全面而又深入浅出......一起来看看 《Rails 5敏捷开发》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具