我們的網站是用沉重的node_modules.
許多沉重的包裹會導致沉重node_modules并最終影響 AWS 上的沉重成本。
Sowe 正在嘗試減少總捆綁包大小以降低一些成本。
我發現，通過使用 webpack 拆分代碼，我們可以擁有更多但更小的包。不過，整體大小并沒有太大變化。
我想知道的是，使用 webpack 拆分代碼可以節省一些 AWS 成本嗎？
對不起，這個問題很糟糕，但這就是我現在能想到的。
任何好主意都會非常有幫助 Thx。
uj5u.com熱心網友回復：
這是一個復雜的話題，也是同樣開放的問題！為了回答這個問題，我將做一些假設：
- 通過節省 AWS 成本，這意味著減少捆綁包大小，從而節省傳出帶寬成本。
- 正在構建的應用程式是 100% SPA 即完全客戶端。服務器端優化很快變得非常復雜。
開箱即用，Webpack 會將所有內容捆綁到一個大檔案/包中。它包含您自己的代碼以及來自第三方庫的代碼。這里的基本思想是第三方代碼很少更改，而我們自己的代碼經常更改。
因此，我們可以使用 Webpack 使用 SplitChunksPlugin 將我們的代碼分成兩個不同的夾頭。一個用于我們自己的代碼，另一個用于第三方代碼，即node_modules檔案夾中的代碼；讓我們稱之為供應商捆綁。現在只要您的node_modules檔案夾保持不變，即您的鎖定檔案 -package-lock.json檔案是不變的，它將始終為第三方代碼生成具有完全相同內容的相同包。
接下來的想法是，您可以簡單地獲取此供應商捆綁包并將其上傳到 CDN，然后通過 CDN 使用。CDN 和瀏覽器會發揮它們的快取魔法，用戶幾乎不需要每次都下載這個檔案。CDN 將使用ETag和/或cache-control標頭來實作這一點，而瀏覽器將使用它。
然而，現實卻不同。當你有太多依賴或者使用dependabot更新依賴時，你經常會更新你的鎖檔案。這意味著在每次構建時都會生成一個新的供應商捆綁包，即使存在單個位元組的差異。Webpack 生成的 hash id 會有所不同。在其他情況下，您匯入依賴項的方式也可能會更改生成的包內容，從而導致不同的包。
因此，在架構上，我們通過使用 CDN 來更好地捆綁供應商。第一步是區分穩定的第三方模塊和頻繁更新的第三方模塊。例如，考慮react和react-dom等rxjs。這些不會經常更新。對于這些庫，請使用 cloudflare、cdnjs 或 unpkg 等第三方 CDN。將這些庫添加為基于 CDN 的 UMD 包。
為此，您將這些依賴項添加到您的index.html檔案中，該檔案通常使用html-webpack-plugin.
<!-- index.html -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
現在，只需告訴 Webpack 不要捆綁您已經通過 CDN 提供的這些依賴項script。使用 Webpack externals來做到這一點：
// webpack.config.js
module.exports = {
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
};
使用這種配置，Webpack 不僅會從包中排除 React，還會加快你的打包速度。無論你從反應庫中匯入什么東西，Webpack 都會用它來代替全域物件React。
然后，您可以將此模型擴展到您正在使用的所有穩定庫。使用這種方式的另一個重要優勢是，您的用戶可能已經訪問過其他網站，這些網站會使用相同的 CDN 在他們的瀏覽器中快取此特定檔案。
要自動化您的作業流程，您可以自定義 Webpack 或任何捆綁程式腳本，通過讀取packge.json依賴項的檔案然后生成<script>標簽來注入具有確切版本的這些腳本。這意味著您的依賴項版本仍然有單一的事實來源。您可以閱讀CDN 檔案以了解它們如何允許您為依賴項構建 CDN URL。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/484707.html