搜尋

首頁 >web前端 >js教程 >10個webpack的面試題，你能接住幾題？

10個webpack的面試題，你能接住幾題？

青灯夜游
青灯夜游轉載
2021-09-16 10:35:557299瀏覽

這篇文章要跟大家分享10個關於webpack的面試題，查漏補缺，看看這十個面試題你能答對幾個？是否可以全部答對？

10個webpack的面試題，你能接住幾題？

面試題只是一個引子，快速刷題就是背（面試官問你，但是他不一定很深入），想深入理解還是得花很多精力;

webpack 的建構流程是什麼

  • ##初始化參數：解析webpack設定參數，合併shell傳入和webpack.config.js檔案配置的參數,形成最後的設定結果；

  • 開始編譯：上一個步驟得到的參數初始化compiler對象，註冊所有配置的插件，插件監聽webpack建構生命週期的事件節點，做出對應的反應，執行對象的run方法開始執行編譯；

  • 確定入口：從配置的entry入口，開始解析檔案建構AST語法樹，找出依賴，遞歸下去；

  • ##編譯模組

    ：遞歸中根據檔案類型和loader配置，呼叫所有配置的loader對檔案進行轉換，再找出該模組依賴的模組，再遞歸本步驟直到所有入口依賴的檔案都經過了本步驟的處理；

  • 完成模組編譯並輸出

    ：遞歸完事後，得到每個檔案結果，包含每個模組以及他們之間的依賴關係，根據entry或分包配置產生程式碼區塊chunk;

  • 輸出完成

    ：輸出所有的chunk到檔案系統；

webpack 的熱更新原理

其實是自己

開啟了express應用程式

，加入了對webpack編譯的監聽，加入了和瀏覽器的websocket長連接，當檔案變更觸發webpack進行編譯並完成後，會透過sokcet訊息告訴瀏覽器準備刷新。而為了減少刷新的代價，就是不用刷新網頁，而是刷新某個模組，webpack-dev-server可以支援熱更新，透過產生檔案的hash值來比對需要更新的模組，瀏覽器再進行熱替換

服務端

#啟動webpack-dev-server伺服器
  • 建立webpack實例
  • 建立server伺服器
  • 新增webpack的done事件回呼
  • 編譯完成向客戶端發送訊息
  • 建立express應用app
  • 設定檔系統為記憶體檔案系統
  • 新增webpack-dev-middleware 中間件
  • #中間件負責傳回產生的檔案
  • 啟動webpack編譯
    • ##創建http伺服器並啟動服務
  • 使用sockjs在瀏覽器端和服務端之間建立一個websocket長連線
  • 建立socket伺服器
  • 客戶端

webpack-dev-server/client端會監聽到此hash訊息

    客戶端收到ok訊息後會執行reloadApp方法進行更新
  • 在reloadApp中會進行判斷，是否支援熱更新，如果支援的話發生webpackHotUpdate事件，如果不支援就直接刷新瀏覽器
  • 在webpack/hot/dev-server.js 會監聽webpackHotUpdate 事件
  • 在check方法裡會呼叫module.hot.check方法
  • HotModuleReplacement.runtime請求Manifest
  • 透過呼叫JsonpMainTemplate.runtime 的hotDownloadManifest方法
  • ##JsonpMainTemplate. runtime的hotDownloadUpdateChunk方法透過JSONP請求取得最新的模組程式碼
  • 補丁js取回或會呼叫JsonpMainTemplate.runtime.js 的webpackHotUpdate 方法
  • #然後會呼叫HotModuleReplacement.runtime.js動態更新模組程式碼
  • 然後呼叫hotApply方法進行熱更
  • webpack 打包是hash碼是如何產生的

1、webpack生態中存在多種計算hash的方式

hash
  • #chunkhash
  • ##contenthash
  • hash代表每次webpack編譯中產生的hash值，所有使用這種方式的檔案hash都相同。每次建置都會使webpack計算新的hash。 chunkhash是基於入口檔案及其關聯的chunk形成，某個檔案的改變只會影響與它有關聯的chunk的hash值，不會影響其他檔案contenthash根據檔案內容建立。當檔案內容變更時，contenthash會變更
    • 2、避免相同隨機值
  • webpack在計算hash後分割chunk。 產生相同隨機值可能是因為這些檔案屬於同一個chunk,可以將某個檔案提到獨立的chunk（如放入entry）

webpack 離線快取靜態資源如何實現

  • 在配置webpack時，我們可以使用html-webpack-plugin來注入到和html一段腳本來實現將第三方或共用資源進行靜態化儲存在html中註入一段標識，例如ac601a84bdd9ec7b81aa524a2e2a51dc ,在html-webpack-plugin 中即可透過設定html屬性，將script注入進去
  • 利用webpack-manifest-plugin 並透過配置webpack-manifest-plugin ,產生manifestjson 文件，用來比較js資源的差異，做到是否替換，當然，也要寫快取script
  • #在我們做Cl以及CD的時候，也可以透過編輯檔案流來實現靜態化腳本的注入，來降低伺服器的壓力，提高效能
  • 可以透過自訂plugin或html-webpack-plugin等週期函數，動態注入前端靜態化儲存script

webpack 常見的plugin有哪些

  • ProvidePlugin：自動載入模組，取代require和import
  • html-webpack-plugin可以依照範本自動產生html程式碼，並自動引用css和js檔案
  • ##extract-text-webpack-plugin 將js檔案中引用的樣式單獨抽離成css檔案
  • DefinePlugin 編譯時配置全域變量，這對開發模式和發布模式的建置允許不同的行為非常有用。
  • HotModuleReplacementPlugin 熱更新
  • optimize-css-assets-webpack-plugin# 不同元件中重複的css可以快速去重
  • webpack-bundle-analyzer 一個webpack的bundle檔案分析工具，將bundle檔案以可互動縮放的treemap的形式展示。
  • compression-webpack-plugin 生產環境可採用gzip壓縮JS與CSS
  • happypack：透過多重進程模型，來加速程式碼建置
  • clean-wenpack-plugin 清理每次打包下沒有使用的檔案
  • speed-measure-webpack-plugin:可以看至U每個Loader和Plugin執行耗時（整個櫸丁套件耗時、每個Plugin和Loader 耗時）
  • webpack-bundle-analyzer:可視化Webpack輸出檔案的體積（業務元件、依賴第三方模組

webpack 外掛程式如何實作

    webpack本質是一個事件流機制，核心模組：tabable(Sync Async)Hooks建構出=== Compiler(編譯) Compiletion(創建bundles)
  • compiler物件代表了完整的webpack環境配置。這個物件在啟動webpack時被一次建立，並配置所有可操作的設置，包括options、loader和plugin。當在webpack環境中應用一個插件時，插件將收到此compiler物件的引用。可以使用它來存取webpack的主環境
  • compilation物件代表了一次資源版本構建。當執行webpack開發環境中間件時，每當檢測到一個檔案變化，就會創建一個新的compilation,從而產生一個新的編譯資源。一個compilation物件表現了當前的模組資源、編譯生成資源、變化的檔案、以及被追蹤依賴的狀態的資訊。compilation物件也提供了許多關鍵時機的回調，以供外掛程式做自訂處理時選擇使用
  • 建立一個外掛函數，在其prototype上定義apply方法，指定一個webpack自身的事件鉤子
  • 函數內部處理webpack內部實例的特定資料
  • #處理完成後，呼叫webpack提供的回呼函數
  • function MyWebpackPlugin()(
}；
// prototype 上定义 apply 方法
MyWebpackPlugin.prototype.apply=function(){
// 指定一个事件函数挂载到webpack
compiler.pluginCwebpacksEventHook"funcion (compiler)( console. log(“这是一个插件”)；
// 功能完成调用后webpack提供的回调函数
callback()
})

#webpack有哪些常用的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如何實現持久化快取

  • 服務端設定http快取頭（cache-control）
  • 打包依賴和運行時到不同的chunk，即為splitChunk,因為他們幾乎是不變的
  • 延遲載入：使用import()方式，可以動態載入的檔案分到獨立的chunk,以獲得自己的chunkhash
  • #保持hash值的穩定：編譯過程和檔案內通的變更盡量不影響其他檔案hash的計算，對於低版本webpack產生的增量數字id不穩定問題，可用hashedModuleIdsPlugin基於檔案路徑產生解決

如何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插件來進⾏公共模組抽取,利⽤瀏覽器快取可以⻓期快取這些⽆需頻繁變動的公共代碼

webpack treeShaking機制的原理

  • #treeShaking 也叫搖樹優化，是一種透過移除多於程式碼，來優化打包體積的，生產環境預設為開啟。
  • 可以在程式碼不執行的狀態下，分析出不需要的程式碼；
  • 利用es6模組的規範
    • ES6 Module引入進行靜態分析，故而編譯的時候正確判斷到底載入了那些模組
    • 靜態分析程式流，判斷那些模組和變數未使用或引用，進而刪除對應程式碼

#原文位址：https://juejin.cn/post/7002839760792190989

作者：前端_小牛_到犀牛

相關教學推薦：《Webpack入門影片教學》

以上是10個webpack的面試題，你能接住幾題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：掘金--前端_小牛_到犀牛。如有侵權，請聯絡admin@php.cn刪除
上一篇：淺析Angular中什麼是ngModule下一篇：淺析Angular中什麼是ngModule

相關文章

看更多