前端面試資料整理【工具篇】

donggg 發表於 2022-05-26
前端 面試

webpack

處理包的原理

webpack打包原理

執行run 命令 [
1. entry -> ast 編譯(查詢所有 import) -> 識別出 import 的相關引用,形成 dependency 樹 -> 通過 loader 將程式碼轉義,此步驟可忽略 -> ast 轉義成 code -> 
2. 執行 build 命令 [遞迴返回所以依賴 -> 返回依賴樹 dependency]
3. 執行 generate 命令 [將依賴樹回填至打包的程式碼中 bundle.js ]
]

es module 與 commonjs 的區別

es module 與 commonjs 的區別

  • cjs 是輸出值的拷貝,esm 是輸出值的引用
  • cjs 是執行是載入(export.module返回的是實際程式碼,順序執行,阻塞執行),esm 是編譯時輸出介面(export 返回的是掛載在 webpack_require.d 上的 key)
  • cjs 是同步的,esm 是非同步的。(因為其返回的不一樣)

loader 與 plugin

loader: 是決定如何處理檔案,例如從 A 變成了 B。通常返回的是一段邏輯,代表如何處理檔案。這段邏輯程式碼最後也會填入到打包檔案中。
plugin: 是為了補充 webpack 的能力。依賴 webpack 提供的 api 進行操作,返回的是執行後結果。

resolve

處理解析的,常用的:

  • extension 解析檔案的字尾,預設是 js,json
  • modules 解析的包路徑,預設是 node_modules。
  • alias 省略部分解析的路徑寫法。

optimization

內建的優化,例如壓縮、chunk打包。

其他

  • resolveLoader 處理 loader 解析方式
resolveLoader: {
    alias: {
      'a-loader': path.resolve(__dirname, 'loaders/a.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'a-loader',
        exclude: /node_modules/
      }
    ]
  },
// 等價於
module: {
    rules: [
      {
        test: /\.js$/,
        use: path.resolve(__dirname, 'loaders/a.js'),
        exclude: /node_modules/
      }
    ]
  },

專案

首屏載入優化

  • 元件的懶載入 React.lazy()
  • nginx gzip
  • cdn
  • 圖片壓縮、圖片懶載入:intersectionObservers
  • 程式碼優化:render中變數宣告、全域性變數引用後使用可以減少、減少層級結構減少dom
  • webpackt 程式碼劃分,code splite 按需載入
  • 模組引用模式優化,例如 lodash 按需引用,echart 按需引用。可以通過 webpack-anylsis 檢視。
  • 通過 webpack alias 處理一些依賴的依賴
  • 程式碼壓縮
  • SSR (待調研)
  • 開啟快取

前端有那些優化方案

程式碼優化

  • 全域性變數區域性引用,提高gc效能
  • foreach 迴圈 > for > for ... in
  • 避免使用閉包,(返回父函式變數,也就是常說的記憶體洩漏)
  • 減少 dom 的增刪,減少迴流和重繪,可以利用碎片
  • 減少訪問 clientHeight 等清空瀏覽器渲染優化佇列

腳手架優化

  • 程式碼的壓縮
  • 圖片的壓縮
  • 利用包管理工具,優化包的引用
  • 引用包的處理,例如 lodash/moment
  • 程式碼分離
  • wepack three shaking ,刪除冗餘程式碼
  • webpack optimizer sideEffect 刪除未引用的包

React 優化

  • 利用 function component 替換 class component
  • 減少在 render 函式中使用匿名函式,用類方法代替(減少 gc)

服務端優化

  • gzip 壓縮
  • 開啟協商快取
  • cdn
  • SSR