web前端工程化合集

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

一、Git

1. git 和 svn 的區別

• git 和 svn 最大的區別在于 git 是分布式的，而 svn 是集中式的，因此我們不能再離線的情況下使用 svn，如果服務器出現問題，就沒有辦法使用 svn 來提交代碼，
• svn 中的分支是整個版本庫的復制的一份完整目錄，而 git 的分支是指標指向某次提交，因此 git 的分支創建更加開銷更小并且分支上的變化不會影響到其他人，svn 的分支變化會影響到所有的人，
• svn 的指令相對于 git 來說要簡單一些，比 git 更容易上手，
• GIT把內容按元資料方式存盤，而SVN是按檔案：因為git目錄是處于個人機器上的一個克隆版的版本庫，它擁有中心版本庫上所有的東西，例如標簽，分支，版本記錄等，
• GIT分支和SVN的分支不同：svn會發生分支遺漏的情況，而git可以同一個作業目錄下快速的在幾個分支間切換，很容易發現未被合并的分支，簡單而快捷的合并這些檔案，
• GIT沒有一個全域的版本號，而SVN有
• GIT的內容完整性要優于SVN：GIT的內容存盤使用的是SHA-1哈希演算法，這能確保代碼內容的完整性，確保在遇到磁盤故障和網路問題時降低對版本庫的破壞

2. 經常使用的 git 命令？

git init                     // 新建 git 代碼庫
git add                      // 添加指定檔案到暫存區
git rm                       // 洗掉作業區檔案，并且將這次洗掉放入暫存區
git commit -m [message]      // 提交暫存區到倉庫區
git branch                   // 列出所有分支
git checkout -b [branch]     // 新建一個分支，并切換到該分支
git status                   // 顯示有變更檔案的狀態

3. git pull 和 git fetch 的區別

• git fetch 只是將遠程倉庫的變化下載下來，并沒有和本地分支合并，
• git pull 會將遠程倉庫的變化下載下來，并和當前分支合并，

4. git rebase 和 git merge 的區別

git merge 和 git rebase 都是用于分支合并，關鍵在 commit 記錄的處理上不同：

• git merge 會新建一個新的 commit 物件，然后兩個分支以前的 commit 記錄都指向這個新 commit 記錄，這種方法會保留之前每個分支的 commit 歷史，
• git rebase 會先找到兩個分支的第一個共同的 commit 祖先記錄，然后將提取當前分支這之后的所有 commit 記錄，然后將這個 commit 記錄添加到目標分支的最新提交后面，經過這個合并后，兩個分支合并后的 commit 記錄就變為了線性的記錄了，

二、Webpack

1. webpack與grunt、gulp的不同？

Grunt、Gulp是基于任務運?的?具： 它們會?動執?指定的任務，就像流?線，把資源放上去然后通過不同插件進?加?，它們包含活躍的社區，豐富的插件，能?便的打造各種?作流，

Webpack是基于模塊化打包的?具: ?動化處理模塊，webpack把?切當成模塊，當 webpack 處理應?程式時，它會遞回地構建?個依賴關系圖 (dependency graph)，其中包含應?程式需要的每個模塊，然后將所有這些模塊打包成?個或多個 bundle，

因此這是完全不同的兩類?具,?現在主流的?式是?npm script代替Grunt、Gulp，npm script同樣可以打造任務流，

2. webpack、rollup、parcel優劣？

• webpack適?于?型復雜的前端站點構建: webpack有強?的loader和插件?態,打包后的?件實際上就是?個?即執?函式，這個?即執?函式接收?個引數，這個引數是模塊物件，鍵為各個模塊的路徑，值為模塊內容，?即執?函式內部則處理模塊之間的引?，執?模塊等,這種情況更適合?件依賴復雜的應?開發，
• rollup適?于基礎庫的打包，如vue、d3等: Rollup 就是將各個模塊打包進?個?件中，并且通過 Tree-shaking 來洗掉??的代碼,可以最?程度上降低代碼體積,但是rollup沒有webpack如此多的的如代碼分割、按需加載等?級功能，其更聚焦于庫的打包，因此更適合庫的開發，
• parcel適?于簡單的實驗性項?: 他可以滿?低?檻的快速看到效果,但是?態差、報錯資訊不夠全?都是他的硬傷，除了?些玩具項?或者實驗項?不建議使?，

3. 有哪些常?的Loader？

• file-loader：把?件輸出到?個?件夾中，在代碼中通過相對 URL 去引?輸出的?件
• url-loader：和 file-loader 類似，但是能在?件很?的情況下以 base64 的?式把?件內容注?到代碼中去
• source-map-loader：加載額外的 Source Map ?件，以?便斷點除錯
• image-loader：加載并且壓縮圖??件
• babel-loader：把 ES6 轉換成 ES5
• css-loader：加載 CSS，?持模塊化、壓縮、?件導?等特性
• style-loader：把 CSS 代碼注?到 JavaScript 中，通過 DOM 操作去加載 CSS，
• eslint-loader：通過 ESLint 檢查 JavaScript 代碼

注意：在Webpack中，loader的執行順序是從右向左執行的，因為webpack選擇了compose這樣的函式式編程方式，這種方式的運算式執行是從右向左的，

4. 有哪些常?的Plugin？

• define-plugin：定義環境變數
• html-webpack-plugin：簡化html?件創建
• uglifyjs-webpack-plugin：通過 UglifyES 壓縮 ES6 代碼
• webpack-parallel-uglify-plugin: 多核壓縮，提?壓縮速度
• webpack-bundle-analyzer: 可視化webpack輸出?件的體積
• mini-css-extract-plugin: CSS提取到單獨的?件中，?持按需加載

5. bundle，chunk，module是什么？

• bundle：是由webpack打包出來的?件；
• chunk：代碼塊，?個chunk由多個模塊組合?成，?于代碼的合并和分割；
• module：是開發中的單個模塊，在webpack的世界，?切皆模塊，?個模塊對應?個?件，webpack會從配置的 entry中遞回開始找出所有依賴的模塊，

6. Loader和Plugin的不同？

不同的作?:

• Loader直譯為"加載器"，Webpack將?切?件視為模塊，但是webpack原?是只能決議js?件，如果想將其他?件也打包的話，就會?到 loader ， 所以Loader的作?是讓webpack擁有了加載和決議?JavaScript?件的能?，
• Plugin直譯為"插件"，Plugin可以擴展webpack的功能，讓webpack具有更多的靈活性， 在 Webpack 運?的?命周期中會?播出許多事件，Plugin 可以監聽這些事件，在合適的時機通過 Webpack 提供的 API 改變輸出結果，

不同的?法:

• Loader在 module.rules 中配置，也就是說他作為模塊的決議規則?存在， 型別為陣列，每?項都是?個 Object ，??描述了對于什么型別的?件（ test ），使?什么加載( loader )和使?的引數（ options ）
• Plugin在 plugins 中單獨配置， 型別為陣列，每?項是?個 plugin 的實體，引數都通過建構式傳?，

7. webpack的構建流程?

Webpack 的運?流程是?個串?的程序，從啟動到結束會依次執?以下流程：

1. 初始化引數：從配置?件和 Shell 陳述句中讀取與合并引數，得出最終的引數；
2. 開始編譯：?上?步得到的引數初始化 Compiler 物件，加載所有配置的插件，執?物件的 run ?法開始執?編譯；
3. 確定??：根據配置中的 entry 找出所有的???件；
4. 編譯模塊：從???件出發，調?所有配置的 Loader 對模塊進?翻譯，再找出該模塊依賴的模塊，再遞回本步驟直到所有??依賴的?件都經過了本步驟的處理；
5. 完成模塊編譯：在經過第4步使? Loader 翻譯完所有模塊后，得到了每個模塊被翻譯后的最終內容以及它們之間的依賴關系；
6. 輸出資源：根據??和模塊之間的依賴關系，組裝成?個個包含多個模塊的 Chunk，再把每個 Chunk 轉換成?個單獨的?件加?到輸出串列，這步是可以修改輸出內容的最后機會；
7. 輸出完成：在確定好輸出內容后，根據配置確定輸出的路徑和?件名，把?件內容寫?到?件系統，

在以上程序中，Webpack 會在特定的時間點?播出特定的事件，插件在監聽到感興趣的事件后會執?特定的邏輯，并且插件可以調? Webpack 提供的 API 改變 Webpack 的運?結果，

8. 撰寫loader或plugin的思路？

Loader像?個"翻譯官"把讀到的源?件內容轉義成新的?件內容，并且每個Loader通過鏈式操作，將源?件?步步翻譯成想要的樣?，

撰寫Loader時要遵循單?原則，每個Loader只做?種"轉義"?作， 每個Loader的拿到的是源?件內容（source），可以通過回傳值的?式將處理后的內容輸出，也可以調? this.callback() ?法，將內容回傳給webpack， 還可以通過this.async() ?成?個 callback 函式，再?這個callback將處理后的內容輸出出去， 此外 webpack 還為開發者準備了開發loader的?具函式集——loader-utils ，

相對于Loader??，Plugin的撰寫就靈活了許多， webpack在運?的?命周期中會?播出許多事件，Plugin 可以監聽這些事件，在合適的時機通過 Webpack 提供的 API 改變輸出結果，

9. webpack 熱更新的實作原理？

webpack的熱更新?稱熱替換（Hot Module Replacement），縮寫為HMR， 這個機制可以做到不?重繪瀏覽器?將新變更的模塊替換掉舊的模塊，

原理： 

?先要知道server端和client端都做了處理?作：

1. 第?步，在 webpack 的 watch 模式下，?件系統中某?個?件發?修改，webpack 監聽到?件變化，根據配置?

件對模塊重新編譯打包，并將打包后的代碼通過簡單的 JavaScript 物件保存在記憶體中，

2. 第?步是 webpack-dev-server 和 webpack 之間的接?互動，?在這?步，主要是 dev-server 的中間件 webpack- dev-middleware 和 webpack 之間的互動，webpack-dev-middleware 調? webpack 暴露的 API對代碼變化進?監 控，并且告訴 webpack，將代碼打包到記憶體中，
3. 第三步是 webpack-dev-server 對?件變化的?個監控，這?步不同于第?步，并不是監控代碼變化重新打包，當我們在配置?件中配置了devServer.watchContentBase 為 true 的時候，Server 會監聽這些配置?件夾中靜態?件的變化，變化后會通知瀏覽器端對應?進? live reload，注意，這?是瀏覽器重繪，和 HMR 是兩個概念，
4. 第四步也是 webpack-dev-server 代碼的?作，該步驟主要是通過 sockjs（webpack-dev-server 的依賴）在瀏覽器端和服務端之間建??個 websocket ?連接，將 webpack 編譯打包的各個階段的狀態資訊告知瀏覽器端，同時也包括第三步中 Server 監聽靜態?件變化的資訊，瀏覽器端根據這些 socket 訊息進?不同的操作，當然服務端傳遞的最主要資訊還是新模塊的 hash 值，后?的步驟根據這? hash 值來進?模塊熱替換，
5. webpack-dev-server/client 端并不能夠請求更新的代碼，也不會執?熱更模塊操作，?把這些?作?交回給了webpack，webpack/hot/dev-server 的?作就是根據 webpack-dev-server/client 傳給它的資訊以及 dev-server 的配置決定是重繪瀏覽器呢還是進?模塊熱更新，當然如果僅僅是重繪瀏覽器，也就沒有后?那些步驟了，
6. HotModuleReplacement.runtime 是客戶端 HMR 的中樞，它接收到上?步傳遞給他的新模塊的 hash 值，它通過JsonpMainTemplate.runtime 向 server 端發送 Ajax 請求，服務端回傳?個 json，該 json 包含了所有要更新的模塊的 hash 值，獲取到更新串列后，該模塊再次通過 jsonp 請求，獲取到最新的模塊代碼，這就是上圖中 7、8、9 步驟，
7. ?第 10 步是決定 HMR 成功與否的關鍵步驟，在該步驟中，HotModulePlugin 將會對新舊模塊進?對?，決定是否更新模塊，在決定更新模塊后，檢查模塊之間的依賴關系，更新模塊的同時更新模塊間的依賴引?，
8. 最后?步，當 HMR 失敗后，回退到 live reload 操作，也就是進?瀏覽器重繪來獲取最新打包代碼，

10. 如何?webpack來優化前端性能？

?webpack優化前端性能是指優化webpack的輸出結果，讓打包的最終結果在瀏覽器運?快速?效，

• 壓縮代碼：洗掉多余的代碼、注釋、簡化代碼的寫法等等?式，可以利?webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來壓縮JS?件， 利? cssnano （css-loader?minimize）來壓縮css
• 利?CDN加速: 在構建程序中，將引?的靜態資源路徑修改為CDN上對應的路徑，可以利?webpack對于 output 引數和各loader的 publicPath 引數來修改資源路徑
• Tree Shaking: 將代碼中永遠不會?到的?段洗掉掉，可以通過在啟動webpack時追加引數 --optimize-minimize 來實作
• Code Splitting: 將代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時可以充分利?瀏覽器快取
• 提取公共第三?庫: SplitChunksPlugin插件來進?公共模塊抽取,利?瀏覽器快取可以?期快取這些?需頻繁變動的公共代碼

11. 如何提?webpack的打包速度?

• happypack: 利?行程并?編譯loader,利?快取來使得 rebuild 更快,遺憾的是作者表示已經不會繼續開發此項?,類似的替代者是thread-loader
• 外部擴展(externals): 將不怎么需要更新的第三?庫脫離webpack打包，不被打?bundle中，從?減少打包時間，?如jQuery?script標簽引?
• dll: 采?webpack的 DllPlugin 和 DllReferencePlugin 引?dll，讓?些基本不會改動的代碼先打包成靜態資源，避免反復編譯浪費時間
• 利?快取: webpack.cache 、babel-loader.cacheDirectory、 HappyPack.cache 都可以利?快取提?rebuild效率縮??件搜索范圍: ?如babel-loader插件,如果你的?件僅存在于src中,那么可以 include: path.resolve(__dirname,'src') ,當然絕?多數情況下這種操作的提升有限，除?不??build了node_modules?件

12. 如何提?webpack的構建速度？

1. 多??情況下，使? CommonsChunkPlugin 來提取公共代碼
2. 通過 externals 配置來提取常?庫
3. 利? DllPlugin 和 DllReferencePlugin 預編譯資源模塊 通過 DllPlugin 來對那些我們引?但是絕對不會修改的npm包來進?預編譯，再通過 DllReferencePlugin 將預編譯的模塊加載進來，
4. 使? Happypack 實作多執行緒加速編譯
5. 使? webpack-uglify-parallel 來提升 uglifyPlugin 的壓縮速度， 原理上 webpack-uglify-parallel 采?了多核并?壓縮來提升壓縮速度
6. 使? Tree-shaking 和 Scope Hoisting 來剔除多余代碼

13. 怎么配置單?應?？怎么配置多?應?？

單?應?可以理解為webpack的標準模式，直接在 entry 中指定單?應?的??即可，這?不再贅述多?應?的話，可以使?webpack的 AutoWebPlugin 來完成簡單?動化的構建，但是前提是項?的?錄結構必須遵守他預設的規范， 多?應?中要注意的是：

• 每個??都有公共的代碼，可以將這些代碼抽離出來，避免重復的加載，?如，每個??都引?了同?套css樣式表
• 隨著業務的不斷擴展，??可能會不斷的追加，所以?定要讓??的配置?夠靈活，避免每次添加新??還需要修改構建配置

三、其他

1. Babel的原理是什么?

babel 的轉譯程序也分為三個階段，這三步具體是：

• 決議 Parse: 將代碼決議?成抽象語法樹（AST），即詞法分析與語法分析的程序；
• 轉換 Transform: 對于 AST 進?變換?系列的操作，babel 接受得到 AST 并通過 babel-traverse 對其進?遍歷，在此程序中進?添加、更新及移除等操作；
• ?成 Generate: 將變換后的 AST 再轉換為 JS 代碼, 使?到的模塊是 babel-generator，

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：JavaScript

上一篇：ES6中class方法及super關鍵字

下一篇：JavaScript進階內容——BOM詳解