窺探原理:手寫一個JavaScript打包器

NO IMAGE

窺探原理:手寫一個JavaScript打包器

前言

之前好友希望能介紹一下 webapck 相關的內容,所以最近花費了兩個多月的準備,終於完成了 webapck 系列,它包括一下幾部分:

  • webapck 系列一:手寫一個 JavaScript 打包器
  • webpack 系列二:最佳配置指北
  • webpack 系列三:優化 90% 打包速度
  • webpack 系列四:優化包體積
  • webapck 系列五:優化首屏加載時間與頁面流暢度
  • webapck 系列六:構建包分析
  • webapck 系列七:詳細配置
  • webapck 系列八:手寫一個 webapck 插件(模擬 HtmlWebpackPlugin 的實現)
  • webapck 系列九:webapck4 核心源碼解讀
  • webapck 系列十:webapck5 展望

所有的內容之後會陸續放出,如果你有任何想要了解的內容或者有任何疑問,關注公眾號【前端瓶子君】回覆【123】添加好友,我會解答你的疑問。

作為一個前端開發人員,我們花費大量的時間去處理 webpack、gulp 等打包工具,將高級 JavaScript 項目打包成更復雜、更難以解讀的文件包,運行在瀏覽器中,那麼理解 JavaScript 打包機制就很必要,它幫助你更好的調試項目、更快的定位問題產生的問題,並且幫助你更好的理解、使用 webpack 等打包工具。
在這章你將會深入理解 JavaScript 打包器是什麼,它的打包機制是什麼?解決了什麼問題?如果你理解了這些,接下來的 webpack 優化就會很簡單。

一、什麼是模塊

一個模塊可以有很多定義,但我認為:模塊是一組與特定功能相關的代碼。它封裝了實現細節,公開了一個公共API,並與其他模塊結合以構建更大的應用程序。

所謂模塊化,就是為了實現更高級別的抽象,它將一類或多種實現封裝到一個模塊中,我們不必考慮模塊內是怎樣的依賴關係,僅僅調用它暴露出來的 API 即可。

例如在一個項目中:

<html>
<script src="/src/man.js"></script>
<script src="/src/person.js"></script>
</html>

其中 person.js 中依賴 man.js ,在引用時如果你把它們的引用順序顛倒就會報錯。在大型項目中,這種依賴關係就顯得尤其重要,而且極難維護,除此之外,它還有以下問題:

  • 一切都加載到全局上下文中,導致名稱衝突和覆蓋
  • 涉及開發人員的大量手動工作,以找出依賴關係和包含順序

所以,模塊就尤其重要。

由於前後端 JavaScript 分別擱置在 HTTP 的兩端,它們扮演的角色不同,側重點也不一樣。 瀏覽器端的 JavaScript 需要經歷從一個服務器端分發到多個客戶端執行,而服務器端 JS 則是相同的代碼需要多次執行。前者的瓶頸在於寬帶,後者的瓶頸則在於 CPU 等內存資源。前者需要通過網絡加載代碼,後者則需要從磁盤中加載, 兩者的加載速度也不是在一個數量級上的。 所以前後端的模塊定義不是一致的,其中服務器端的模塊定義為:

  • CJS(CommonJS):旨在用於服務器端 JavaScript 的同步定義,Node 的模塊系統實際上基於 CJS;

但 CommonJS 是以同步方式導入,因為用於服務端,文件都在本地,同步導入即使卡住主線程影響也不大,但在瀏覽器端,如果在 UI 加載的過程中需要花費很多時間來等待腳本加載完成,這會造成用戶體驗的很大問題。 鑑於網絡的原因, CommonJS 為後端 JavaScript 制定的規範並不完全適合與前端的應用場景,下面來介紹 JavaScript 前端的規範。

  • AMD(異步模塊定義):被定義為用於瀏覽器中模塊的異步模型,RequireJS 是 AMD 最受歡迎的實現;
  • UMD(通用模塊定義):它本質上一段 JavaScript 代碼,放置在庫的頂部,可讓任何加載程序、任何環境加載它們;
  • ES2015(ES6):定義了異步導入和導出模塊的語義,會編譯成 require/exports 來執行的,這也是我們現今最常用的模塊定義;

二、什麼是打包器

所謂打包器,就是前端開發人員用來將 JavaScript 模塊打包到一個可以在瀏覽器中運行的優化的 JavaScript 文件的工具,例如 webapck、rollup、gulp 等。

舉個例子,你在一個 html 文件中引入多個 JavaScript 文件:

<html>
<script src="/src/entry.js"></script>
<script src="/src/message.js"></script>
<script src="/src/hello.js"></script>
<script src="/src/name.js"></script>
</html>

這四個引入文件之間存在如下依賴關係:

窺探原理:手寫一個JavaScript打包器

1. 模塊化

在 HTML 引入時,我們需要注意這 4 個文件的引入順序(如果順序出錯,項目就會報錯),如果將其擴展到具有實際功能的可用的 web 項目中,那麼可能需要引入幾十個文件,依賴關係更是複雜。

所以,我們需要將每個依賴項模塊化,讓打包器幫助我們管理這些依賴項,讓每個依賴項能夠在正確的時間、正確的地點被正確的引用。

2. 捆綁

另外,當瀏覽器打開該網頁時,每個 js 文件都需要一個單獨的 http 請求,即 4 個往返請求,才能正確的啟動你的項目。

我們知道瀏覽器加載模塊很慢,即使是 HTTP/2 支持有效的加載許多小文件,但其性能都不如加載一個更加有效(即使不做任何優化)。

因此,最好將所有 4 個文件合併為1個:

<html>
<script src="/dist/bundle.js"></script>
</html>

這樣只需要一次 http 請求即可。

所以,模塊化與捆綁是打包器需要實現的兩個最主要功能。

三、如何打包

如何打包到一個文件喃?它通常有一個入口文件,從入口文件開始,獲取所有的依賴項,並打包到一個文件 bundle.js 中。例如上例,我們可以以 /src/entry.js 作為入口文件,進行合併其餘的 3 個 JavaScript 文件。

窺探原理:手寫一個JavaScript打包器

當然合並不能是簡單的將 4 個文件所有內容放入一個 bundle.js 中。我們先思考一下,它具體該怎麼實現喃?

1. 解析入口文件,獲取所有的依賴項

首先我們唯一確定的是入口文件的地址,通過入口文件的地址可以

  • 獲取其文件內容
  • 獲取其依賴模塊的相對地址

由於依賴模塊的引入是通過相對路徑(import './message.js'),所以,我們需要保存入口文件的路徑,結合依賴模塊的相對地址,就可以確定依賴模塊絕對地址,讀取它的內容。

如何在依賴關係中去表示一個模塊,以方便在依賴圖中引用

所以我們可以模塊表示為:

  • code: 文件解析內容,注意解析後代碼能夠在當前以及舊瀏覽器或環境中運行;
  • dependencies: 依賴數組,為所有依賴模塊路徑(相對)路徑;
  • filename: 文件絕對路徑,當 import 依賴模塊為相對路徑,結合當前絕對路徑,獲取依賴模塊路徑;

其中 filename(絕對路徑) 可以作為每個模塊的唯一標識符,通過 key: value 形式,直接獲取文件的內容一依賴模塊:

// 模塊
'src/entry': {
code: '', // 文件解析後內容
dependencies: ["./message.js"], // 依賴項
}

2. 遞歸解析所有的依賴項,生成一個依賴關係圖

我們已經確定了模塊的表示,那怎麼才能將這所有的模塊關聯起來,生成一個依賴關係圖,通過這個依賴關係可以直接獲取所有模塊的依賴模塊、依賴模塊的代碼、依賴模塊的來源、依賴模塊的依賴模塊。

如何去維護依賴文件間的關係

現在對於每一個模塊,可以唯一表示的就是 filename ,而我們在由入口文件遞歸解析時,我們可以獲取到每個文件的依賴數組 dependencies ,也就是每個依賴項的相對路徑,所以我們需要定義一個:

// 關聯關係
let mapping = {}

用來在運行代碼時,由 import 相對路徑映射到 import 絕對路徑。

所以我們模塊可以定義為[filename: {}]:

// 模塊
'src/entry': {
code: '', // 文件解析後內容
dependencies: ["./message.js"], // 依賴項
mapping:{
"./message.js": "src/message.js"       
}
}

則依賴關係圖為:

// graph 依賴關係圖
let graph = {
// entry 模塊
"src/entry.js": {
code: '',
dependencies: ["./src/message.js"],
mapping:{
"./message.js": "src/message.js"       
}
},
// message 模塊
"src/message.js": {
code: '',
dependencies: [],
mapping:{},
}
}

當項目運行時,通過入口文件成功獲取入口文件代碼內容,運行其代碼,當遇到 import 依賴模塊時,通過 mapping 映射其為絕對路徑,就可以成功讀取模塊內容。

並且每個模塊的絕對路徑 filename 是唯一的,當我們將模塊接入到依賴圖 graph 時,僅僅需要判斷 graph[filename] 是否存在,如果存在就不需要二次加入,剔除掉了模塊的重複打包。

3. 使用依賴圖,返回一個可以在瀏覽器運行的 JavaScript 文件

現今,可立即執行的代碼形式,最流行的就是 IIFE(立即執行函數),它同時能夠解決全局變量汙染的問題。

IIFE

所謂 IIFE,就是在聲明市被直接調用的匿名函數,由於 JavaScript 變量的作用域僅限於函數內部,所以你不必考慮它會汙染全局變量。

(function(man){
function log(name) {
console.log(`hello ${name}`);
}
log(man.name)
})({name: 'bottle'});
// hello bottle

4. 輸出到 dist/bundle.js

fs.writeFile 寫入 dist/bundle.js 即可。

至此,打包流程與實現方案已確定,接下來就實踐一遍吧!

四、創建一個minipack項目

新建一個 minipack 文件夾,並 npm init ,創建以下文件:

- src
- - entry.js // 入口 js
- - message.js // 依賴項
- - hello.js // 依賴項
- - name.js // 依賴項
- index.js // 打包 js
- minipack.config.js // minipack 打包配置文件
- package.json 
- .gitignore

其中 entry.js

import message from './message.js'
import {name} from './name.js'
message()
console.log('----name-----: ', name)

message.js

import {hello} from './hello.js'
import {name} from './name.js'
export default function message() {
console.log(`${hello} ${name}!`)
}

hello.js

export const hello = 'hello'

name.js

export const name = 'bottle'

minipack.config.js

const path = require('path')
module.exports = {
entry: 'src/entry.js',
output: {
filename: "bundle.js",
path: path.resolve(__dirname, './dist'),
}
}

並安裝文件

npm install @babel/core @babel/parser @babel/preset-env @babel/traverse --save-dev

至此,整個項目創建完成。接下來就是打包了:

  • 解析入口文件,遍歷所有依賴項
  • 遞歸解析所有的依賴項,生成一個依賴關係圖
  • 使用依賴圖,返回一個可以在瀏覽器運行的 JavaScript 文件
  • 輸出到 /dist/bundle.js

五、解析入口文件,遍歷所有依賴項

1. @babel/parser 解析入口文件,獲取 AST

在 ./index.js 文件中,我們創建一個打包器,首先解析入口文件,我們使用 @babel/parser 解析器進行解析:

步驟一:讀取入口文件內容

// 獲取配置文件
const config = require('./minipack.config');
// 入口
const entry = config.entry;
const content = fs.readFileSync(entry, 'utf-8');

步驟二:使用 @babel/parser(JavaScript解析器)解析代碼,生成 ast(抽象語法樹)

const babelParser = require('@babel/parser')
const ast = babelParser.parse(content, {
sourceType: "module"
})

其中,sourceType 指示代碼應解析的模式。可以是"script""module""unambiguous" 之一,其中 "unambiguous" 是讓 @babel/parser 去猜測,如果使用 ES6 importexport 的話就是 "module" ,否則為 "script" 。這裡使用 ES6 importexport ,所以就是 "module"

由於 ast 樹較複雜,所以這裡我們可以通過 astexplorer.net/ 查看:

窺探原理:手寫一個JavaScript打包器

我們已經獲取了入口文件所有的 ast,接下來我們要做什麼喃?

  • 解析 ast,解析入口文件內容(可在當前和舊瀏覽器或環境中向後兼容的 JavaScript 版本)
  • 獲取它所有的依賴模塊 dependencies

2. 獲取入口文件內容

我們已經知道了入口文件的 ast,可以通過 @babel/coretransformFromAst 方法,來解析入口文件內容:

const {transformFromAst} = require('@babel/core');
const {code} = transformFromAst(ast, null, {
presets: ['@babel/preset-env'],
})

窺探原理:手寫一個JavaScript打包器

3. 獲取它所有的依賴模塊

就需要通過 ast 獲取所有的依賴模塊,也就是我們需要獲取 ast 中所有的 node.source.value ,也就是 import 模塊的相對路徑,通過這個相對路徑可以尋找到依賴模塊。

步驟一:定義一個依賴數組,用來存放 ast 中解析出的所有依賴

const dependencies = []

步驟二:使用 @babel/traverse ,它和 babel 解析器配合使用,可以用來遍歷及更新每一個子節點

traverse 函數是一個遍歷 AST 的方法,由 babel-traverse 提供,他的遍歷模式是經典的 visitor 模式 ,visitor 模式就是定義一系列的 visitor ,當碰到 AST 的 type === visitor 名字時,就會進入這個 visitor 的函數。類型為 ImportDeclaration 的 AST 節點,其實就是我們的 import xxx from xxxx,最後將地址 pushdependencies 中.

const traverse = require('@babel/traverse').default
traverse(ast, {
// 遍歷所有的 import 模塊,並將相對路徑放入 dependencies
ImportDeclaration: ({node}) => {
dependencies.push(node.source.value)
}
})

3. 有效返回

{
dependencies,
code,
}

完整代碼:

/**
* 解析文件內容及其依賴,
* 期望返回:
*      dependencies: 文件依賴模塊
*      code: 文件解析內容 
* @param {string} filename 文件路徑
*/
function createAsset(filename) {
// 讀取文件內容
const content = fs.readFileSync(filename, 'utf-8')
// 使用 @babel/parser(JavaScript解析器)解析代碼,生成 ast(抽象語法樹)
const ast = babelParser.parse(content, {
sourceType: "module"
})
// 從 ast 中獲取所有依賴模塊(import),並放入 dependencies 中
const dependencies = []
traverse(ast, {
// 遍歷所有的 import 模塊,並將相對路徑放入 dependencies
ImportDeclaration: ({
node
}) => {
dependencies.push(node.source.value)
}
})
// 獲取文件內容
const {
code
} = transformFromAst(ast, null, {
presets: ['@babel/preset-env'],
})
// 返回結果
return {
dependencies,
code,
}
}

窺探原理:手寫一個JavaScript打包器

六、遞歸解析所有的依賴項,生成一個依賴關係圖

步驟一:獲取入口文件:

const mainAssert = createAsset(entry)

步驟二:創建依賴關係圖:

由於每個模塊都是 key: value 形式,所以定義依賴圖為:

// entry: 入口文件絕對地址
const graph = {
[entry]: mainAssert
}

步驟三:遞歸搜索所有的依賴模塊,加入到依賴關係圖中:

定義一個遞歸搜索函數:

/**
* 遞歸遍歷,獲取所有的依賴
* @param {*} assert 入口文件
*/
function recursionDep(filename, assert) {
// 跟蹤所有依賴文件(模塊唯一標識符)
assert.mapping = {}
// 由於所有依賴模塊的 import 路徑為相對路徑,所以獲取當前絕對路徑
const dirname = path.dirname(filename)
assert.dependencies.forEach(relativePath => {
// 獲取絕對路徑,以便於 createAsset 讀取文件
const absolutePath = path.join(dirname, relativePath)
// 與當前 assert 關聯
assert.mapping[relativePath] = absolutePath
// 依賴文件沒有加入到依賴圖中,才讓其加入,避免模塊重複打包
if (!queue[absolutePath]) {
// 獲取依賴模塊內容
const child = createAsset(absolutePath)
// 將依賴放入 queue,以便於繼續調用 recursionDep 解析依賴資源的依賴,
// 直到所有依賴解析完成,這就構成了一個從入口文件開始的依賴圖
queue[absolutePath] = child
if(child.dependencies.length > 0) {
// 繼續遞歸
recursionDep(absolutePath, child)
}
}
})
}

從入口文件開始遞歸:

// 遍歷 queue,獲取每一個 asset 及其所以依賴模塊並將其加入到隊列中,直至所有依賴模塊遍歷完成
for (let filename in queue) {
let assert = queue[filename]
recursionDep(filename, assert)
}

窺探原理:手寫一個JavaScript打包器

七、使用依賴圖,返回一個可以在瀏覽器運行的 JavaScript 文件

步驟一:創建一個了立即執行函數,用於在瀏覽器上直接運行

const result = `
(function() {
})()
`

步驟二:將依賴關係圖作為參數傳遞給立即執行函數

定義傳遞參數 modules:

let modules = ''

遍歷 graph,將每個 modkey: value, 的方式加入到 modules

注意:由於依賴關係圖要傳入以上立即執行函數中,然後寫入到 dist/bundle.js 運行,所以,code 需要放在 function(require, module, exports){${mod.code}} 中,避免汙染全局變量或其它模塊,同時,代碼在轉換成 code 後,使用的是 commonJS 系統,而瀏覽器不支持 commonJS(瀏覽器沒有 module 、exports、require、global),所以這裡我們需要實現它們,並注入到包裝器函數內。

for (let filename in graph) {
let mod = graph[filename]
modules += `'${filename}': [
function(require, module, exports) {
${mod.code}
},
${JSON.stringify(mod.mapping)},
],`
}

步驟三:將參數傳入立即執行函數,並立即執行入口文件:

首先實現一個 require 函數,require('${entry}') 執行入口文件,entry 為入口文件絕對路徑,也為模塊唯一標識符

const result = `
(function(modules) {
require('${entry}')
})({${modules}})
`

注意:modules 是一組 key: value,,所以我們將它放入 {}

步驟四:重寫瀏覽器 require 方法,當代碼運行 require('./message.js') 轉換成 require(src/message.js)

const result = `
(function(modules) {
function require(moduleId) {
const [fn, mapping] = modules[moduleId]
function localRequire(name) {
return require(mapping[name])
}
const module = {exports: {}}
fn(localRequire, module, module.exports)
return module.exports
}
require('${entry}')
})({${modules}})
`

注意:

  • moduleId 為傳入的 filename ,為模塊的唯一標識符
  • 通過解構 const [fn, mapping] = modules[id] 來獲得我們的函數包裝(function(require, module, exports) {${mod.code}})和 mappings 對象
  • 由於一般情況下 require 都是 require 相對路徑,而不是絕對路徑,所以重寫 fnrequire 方法,將 require 相對路徑轉換成 require 絕對路徑,即 localRequire 函數
  • module.exports 傳入到 fn 中,將依賴模塊內容需要輸出給其它模塊使用時,當 require 某一依賴模塊時,就可以直接通過 module.exports 將結果返回

八、輸出到 dist/bundle.js

// 打包
const result = bundle(graph)
// 寫入 ./dist/bundle.js
fs.writeFile(`${output.path}/${output.filename}`, result, (err) => {
if (err) throw err;
console.log('文件已被保存');
})

九、總結及源碼

本來想簡單的寫寫,結果修修改改又那麼多🤦‍♀️🤦‍♀️🤦‍♀️,但總要吃透才好。

源碼地址:github.com/sisterAn/mi…

參考了minipack,解決了它會出現模塊被重複打包的問題,同時借鑑了webpack以filename為唯一標識符進行模塊定義。

想看往期更過系列文章,點擊前往 github 博客主頁

十、走在最後

  1. ❤️玩得開心,不斷學習,並始終保持編碼。👨💻

  2. 如有任何問題或更獨特的見解,歡迎評論或直接聯繫瓶子君(公眾號回覆 123 即可)!👀👇

  3. 👇歡迎關注:前端瓶子君,每日更新!👇

窺探原理:手寫一個JavaScript打包器

相關文章

Android後臺運行白名單,優雅實現保活

面試官刁難:Java字符串可以引用傳遞嗎?

Filecoin規範②時空證明

APP網絡優化之DNS優化實踐