一、背景 出于优化以及安全性，大部分源码都需要经过转换，才会最后在生产环境使用 压缩混淆代码，减小体积文件合并其他语言通过机器编译成 Javascript 代码经过各种转换后，与开发代码产生了差异，对于线上代码的查错会显得无可奈何无从下手。因此我们需要有一个桥梁搭建起源代码及压缩后代码的联系。二、source map 是什么source map 是从已转换的代码映射到原始源的文件，里面存储着位置信息，能使转换后的每一个位置都能对应转换前的位置，使浏览器能够重构原始源并在调试器中显示重建的原始源。 下面是 source map 的格式： { version: 3, file: "min.js", names: ["bar", "baz", "n"], sources: ["one.js", "two.js"], sourceRoot: "http://example.com/www/js/", mappings: "CAAC,IAAI,IAAM,SAAUA,…
什么是 tree shaking想必前端的同学或多或少对于 Tree Shaking 都会了解一点。随着项目的扩大，引用第三方库或者是不同入口文件引入项目中的公用方法，一定会遇到只引用其中一部分方法的 case。而 Tree Shaking 就是在打包的时候，将这些第三方库或者是公用模块里没有被引用或者使用的代码删除的一种技术。通过删除无用代码，减少最后包的体积，从而减少用户的等待时间，所以 Tree Shaking 是前端一种必要的优化手段。 其实 Tree Shaking 是 Dead Code Elimination（DCE） 的一种表现。DCE 在上世纪90年代的时候就提出了，然而在前端届，在 ES6 出现后，才被 Rollup 在 webpack2 中引入。那么为什么直到 ES6 之后，前端才开始有 Tree Shaking 呢？是因为…
一、宏观任务（macrotask / task）定义：宿主（浏览器）发起的任务。 包括：setTimeOut、setInterval、setImmediate、I/O、用户交互操作，UI渲染 每一个 task 会从头到尾将这个任务执行完毕，不会执行其它。浏览器为了能够使得 JS 内部 task 与 DOM 任务能够有序的执行，会在一个 task执行结束后，在下一个 task 执行开始前，对页面进行重新渲染（task -> 渲染 -> task -> …）。二、微观任务（microtask / job）定义：引擎（js）自己也可以发起的任务…
即上篇文章后，又看到了prototype和__proto__的这个部分。所以再写一篇来梳理这两兄弟。 prototype（显式原型）：几乎所有的函数（除了一些内建函数）都有一个名为prototype的属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法。 作用：用来实现基于原型的继承与属性的共享。_proto_（隐式原型）：对象具有属性_proto_，可称为隐式原型，可用Object.getPrototypeOf()方法获得。它指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。 作用：构成原型链，同样用于实现基于原型的继承。举个例子，当访问obj这个对象中的x属性时，如果在obj中找不到，那么就会沿着__proto__依次查找。…
老是要忘记 Require 和 Import 的区别，究其原因还是自己没有真正掌握好。所以索性花时间去好好搞清楚，这样也避免一遍又一遍去查了。 require / exports ：遵循 CommonJS/AMD，只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。 用法只有以下三种简单的写法： const fs = require('fs') exports.fs = fs module.exports = fs import / export：遵循 ES6 规范，支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。 写法就比较多种多样： import fs from 'fs' import {default as fs} from 'fs' import * as fs from…