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

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

相關文章