jsliang 求职系列 - 34 -Webpack 杂篇

时间 2020-12-07

标签前端 webpack git es6 github web 面试编程小程序 segmentfault 栏目 Git 繁體版

原文原文链接

一目录

不折腾的前端，和咸鱼有什么区别前端

目录
一目录
二前言
三 Babel
3.1 AST
3.2 Babel 原理
四 Webpack - Scope Hoisiting
4.1 Scope Hoisting 开启先后对比
4.2 原理
五参考文献
5.1 Scope Hoisting
5.2 Babel

二前言

由于 Babel 和 Webpack 的 Scope Hoisting 篇幅过小啦，感受没啥内容，发出来像划水，因而抽取出来了。webpack

而后由于是纯理论的知识点，又不记得是否是直接复制某篇文章的，因此若是文章有冒犯，欢迎联系我删除，联系方式在 GitHub 首页：git

https://github.com/LiangJunro...

固然，文章是没有收益的，纯 share，佛系发文，随缘交友，欢迎来聊天吹水。es6

三 Babel

面试官：了解过 Babel 吗？
jsliang：大概知道将 ES6+ 代码，先经过词法分析和语法分析以后解析为 AST，而后将这份 AST 转换为咱们须要形式的 AST，最后将这个 AST 再转换成 ES5 或者指望格式的内容。
面试官：写过 Babel 插件吗？
jsliang：没有。
（完结）

3.1 AST

抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。github

它以树状的形式表现编程语言的语法结构，树上的每一个节点都表示源代码中的一种结构。web

之因此说语法是 “抽象”的，是由于这里的语法并不会表示出真实语法中出现的每一个细节。面试

转换成 AST 的目的就是将咱们书写的字符串文件转换成计算机更容易识别的数据结构，这样更容易提取其中的关键信息，而这棵树在计算机上的表现形式，其实就是一个单纯的 Object。编程

好比 if(false){} 编译成 AST 代码，咱们是知道这段不执行的，就删除这个语法。小程序

AST Explorer

3.2 Babel 原理

大多数 JavaScript Parser 遵循 estree 规范，Babel 最初基于 acorn 项目（轻量级现代 JavaScript 解析器）segmentfault

Babel 大概分为三大部分：

解析：将代码转换成 AST
- 词法分析：将代码（字符串）分割为 token 流，即语法单元成的数组
- 语法分析：分析 token 流（上面生成的数组）并生成 AST
转换：访问 AST 的节点进行变换操做生产新的 AST
- Taro 就是利用 babel 完成的小程序语法转换
生成：以新的 AST 为基础生成代码

想了解如何一步一步实现一个编译器的小伙伴能够移步 Babel 官网曾经推荐的开源项目 the-super-tiny-compiler。

四 Webpack - Scope Hoisiting

Scope Hoisting 是 Webpack3 的新功能，直译为 「做用域提高」，它可让 Webpack 打包出来的 「代码文件更小」，「运行更快」。

熟悉 JavaScript 都应该知道 「函数提高」 和 「变量提高」 ，JavaScript 会把函数和变量声明提高到当前做用域的顶部。

「做用域提高」 也相似于此，Webpack 会把引入的 js 文件 “提高到” 它的引入者顶部。

4.1 Scope Hoisting 开启先后对比

假设咱们有两个文件：

// main.js
export default "hello jsliang~";

// index.js
import str from "./main.js";

使用 Webpack 打包后输出文件内容：

[
  (function (module, __webpack_exports__, __webpack_require__) {
    var __WEBPACK_IMPORTED_MODULE_0__util_js__ = __webpack_require__(1);
    console.log(__WEBPACK_IMPORTED_MODULE_0__util_js__["a"]);
  }),
  (function (module, __webpack_exports__, __webpack_require__) {
    __webpack_exports__["a"] = ('hello jsliang~');
  })
]

开启 Scope Hoisting 后输出文件内容：

[
  (function (module, __webpack_exports__, __webpack_require__) {
    var util = ('hello jsliang~');
    console.log(util);
  })
]

对比两种打包方式输出的代码，咱们能够看出，启用 Scope Hoisting 后，函数声明变成一个， main.js 中定义的内容被直接注入到 main.js 对应模块中，这样作的好处：

「代码体积更小」，由于函数申明语句会产生大量代码，致使包体积增大（模块越多越明显）；
代码在运行时由于建立的函数做用域更少，「内存开销也随之变小」。

4.2 原理

Scope Hoisting 的实现原理其实很简单：分析出模块之间的依赖关系，尽量将打散的模块合并到一个函数中，前提是不能形成代码冗余。所以「只有那些被引用了一次的模块才能被合并」。

因为 Scope Hoisting 须要分析出模块之间的依赖关系，所以源码「必须采用 ES6 模块化语句」，否则它将没法生效。缘由和 Tree Shaking 中介绍的相似。

五参考文献

5.1 Scope Hoisting

[x] webpack 的 scope hoisting 是什么？【阅读建议：5min】
[x] 经过Scope Hoisting优化Webpack输出【阅读建议：5min】
[x] 【Webpack】654- 了不得的 Webpack Scope Hoisting 学习指南【阅读建议：5min】

5.2 Babel

[x] 一篇文章了解前端开发必须懂的 Babel【阅读建议：10min】
[x] 不容错过的 Babel7 知识【阅读建议：30min】
[x] 前端工程师须要了解的 Babel 知识【阅读建议：30min】
[x] 深刻浅出 Babel 上篇：架构和原理 + 实战【阅读建议：30min】
[x] 深刻浅出 Babel 下篇：既生 Plugin 何生 Macros【阅读建议：30min】
[x] 前端工程师的自我修养-关于 Babel 那些事儿【阅读建议：20min】
[x] 前端与编译原理——用JS写一个JS解释器【阅读建议：20min】
[x] 面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒【阅读建议：10min】
[x] 入门babel--实现一个es6的class转换器【阅读建议：10min】