# React webpack 打包後的產物

###### tags: `React` `Webpack`
> [time=Thu, Feb 3, 2022 5:54 PM]

## 文章大意：
- webpack 中的術語
- React 執行 build 生成的檔案

## webpack 中的術語
超級相像的拉 :)，大致上為同一份邏輯程式碼，在不同場景下的名稱。

#### **`Module`**：
各個邏輯功能區塊，包括 ESM, commonJS 或是 AMD 都屬於 module [(JavaScript modules 模块)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules)。

#### **`Chunk`**:
根據 module 相互依賴引用的關係生成 chunk，通常 chunk 會直接輸出對應的 bundle 包(一對一)，但是透過配置可以產生一對多的關係。
主要拆分有三種情況：
- 項目入口文件 (entry)
- 透過動態 import() 進來的
- 透過 splitChunks 拆分出來的

#### **`Bundle`**:
bundle 是由 chunk 組成，包含經過加載和編譯的最終包，可以直接在瀏覽器中運行。

#### Reference:
- [webpack-術語表](https://webpack.docschina.org/glossary/)
- [webpack 中，module，chunk 和 bundle 的区别是什么？](https://www.cnblogs.com/skychx/p/webpack-module-chunk-bundle.html)

<br />

## React 執行 build 創建-生產構建
> 執行完 `npm build` 產生的 `build` 目錄，用於存放生產構建。

使用 CRA (created react app)所建立的生產版本會產生 3 個 `.js` 文件(也稱之為 chunk)

#### **`main.[hash].chunk.js`**：
main 顧名思義就是主要邏輯代碼 App.js 等。

#### **`[hash].chunk.js`**：
這是 vendor 包(第三方庫)，就是專案中 node_modules 內導入的模組。拆分出 vender 有個好處是，vendor 包通常更改頻率較主要邏輯代碼低，並且有[長期緩存技術](https://web.dev/http-cache/#invalidating_and_updating_cached_responses)，所以瀏覽器能夠單獨緩存，不必做不需要的重新下載，提高應用程式加載效能。

#### **`runtime-main.[hash].js`**：
這是 [Webpack runtime 運行時的邏輯 chunk](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk)，用於運行和加載你的應用程式。
陌認情況下，此內容將嵌入在 `build/index.html` 中，以保存其他網路請求，也可以通過設定 `env` 配置檔案中添加 `INLINE_RUNTIME_CHUNK=false`，這將使用加載 `chunk` 方式而不是直接嵌入 `index.html` (在處理 [CSP(内容安全策略)](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 的時候通常需要這麼做)。

#### Reference:
- [React-创建生产构建](https://www.html.cn/create-react-app/docs/production-build/)
- [高级配置](https://www.html.cn/create-react-app/docs/advanced-configuration/)