浅谈 记一次 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
b.js
第二种
a.js
b.js
第三种
a.js
b.js
结论
我们看到 第一种 和 第二种 写法 打包出来 完全一样.至于第三种,其实就是包了一层 default Object 而已。再来一张图。
;
所以其实三种写法 并没有多大卵区别,非说有的话。。。那就是第三种多了一层 obj 吧。如果您有更深刻的理解欢迎 评论。分享无罪,欢迎组队
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Rails 5敏捷开发
[美] Sam Ruby、[美] Dave Thomas、[美] David Heinemeier Hansson / 安道、叶炜、大疆Ruby技术团队 / 华中科技大学出版社 / 2017-12-30 / 115.00
本书以讲解“购书网站”案例为主线,逐步介绍Rails的内置功能。全书分为3部分,第一部分介绍Rails的安装、应用程序验证、Rails框架的体系结构,以及Ruby语言知识;第二部分用迭代方式构建应用程序,然后依据敏捷开发模式开展测试,最后用Capistrano完成部署;第三部分补充日常实用的开发知识。本书既有直观的示例,又有深入的分析,同时涵盖了Web开发各方面的知识,堪称一部内容全面而又深入浅出......一起来看看 《Rails 5敏捷开发》 这本书的介绍吧!