jsliang 求职系列 - 34 -Webpack 杂篇

一 目录

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

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

二 前言

返回目录

因为 BabelWebpackScope Hoisting 篇幅太小啦,感觉没啥内容,发出来像划水,于是抽取出来了。

然后因为是纯理论的知识点,又不记得是不是直接复制某篇文章的,所以如果文章有冒犯,欢迎联系我删除,联系方式在 GitHub 首页:

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

过年回去又要被催找女票了,好扎心……

三 Babel

返回目录
  • 面试官:了解过 Babel 吗?
  • jsliang:大概知道将 ES6+ 代码,先通过词法分析和语法分析之后解析为 AST,然后将这份 AST 转换为我们需要形式的 AST,最后将这个 AST 再转换成 ES5 或者期望格式的内容。
  • 面试官:写过 Babel 插件吗?
  • jsliang:没有。
  • (完结)

3.1 AST

返回目录

抽象语法树(Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。

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

之所以说语法是 “抽象”的,是因为这里的语法并不会表示出真实语法中出现的每个细节。

图

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

图

比如 if(false){} 编译成 AST 代码,我们是知道这段不执行的,就删除这个语法。

3.2 Babel 原理

返回目录

大多数 JavaScript Parser 遵循 estree 规范,Babel 最初基于 acorn 项目(轻量级现代 JavaScript 解析器)

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

返回目录

5.2 Babel

返回目录

jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

一个充满探索欲,喜欢折腾,乐于扩展自己知识面的终身学习斜杠程序员

350 声望
23 粉丝
0 条评论
推荐阅读
迁移 Vue v2.x 版本到 Vite
人生无常,大肠包小肠~在接近年底的时候,有一个 Vue 项目,需要从中抽取 2 个模块出来。然后想着新建项目,Vue CLI 也是学,Vite 也是学,于是哼次哼次用上了 Vite,结果开始了一路的 bug 挨打之旅……警告:本文...

jsliang8阅读 618

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

一个充满探索欲,喜欢折腾,乐于扩展自己知识面的终身学习斜杠程序员

350 声望
23 粉丝
宣传栏