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】