減少 JavaScript 包大小並提高效能的成熟技術

身為暢銷書作家，我邀請您在亞馬遜上探索我的書籍。不要忘記在 Medium 上關注我並表示您的支持。謝謝你！您的支持意味著全世界！

身為開發人員，我了解到優化 JavaScript 套件大小對於創建快速、高效的 Web 應用程式至關重要。多年來，我發現了幾種始終能產生出色結果的技術。讓我分享我對六種減少 JavaScript 套件大小的強大方法的經驗和見解。

程式碼分割在我的開發過程中改變了遊戲規則。透過使用動態導入，我能夠按需載入 JavaScript 模組，從而顯著減少初始載入時間。這種方法對於具有複雜功能集的大型應用程式特別有益。這是我如何實現程式碼分割的範例：

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

在此範例中，僅當使用者點擊按鈕時才載入重型模組，從而保持初始套件大小較小。

搖樹是我常用的另一種技巧。透過利用 ES6 模組和 Webpack 或 Rollup 等建置工具，我可以消除捆綁包中的死程式碼。此過程會刪除未使用的匯出，從而顯著減少最終包的大小。以下是我如何建立程式碼以實現有效的樹搖動的簡單範例：

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

在這種情況下，當與支援樹搖動的工具捆綁時，未使用的函數將從最終捆綁中排除。

縮小是我的最佳化工具包中的標準做法。我使用 UglifyJS 或 Terser 等工具來刪除空格、縮短變數名稱並優化程式碼。此過程可以在不改變功能的情況下顯著減小檔案大小。這是縮小前後的範例：

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

壓縮是我經常實施的另一項關鍵技術。透過在伺服器上啟用 Gzip 或 Brotli 壓縮，我可以顯著減少檔案傳輸大小。這通常是在伺服器層級配置的。例如，在 Apache .htaccess 檔案中：

<ifmodule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</ifmodule>

延遲載入是我效能最佳化工具庫中的一個強大工具。透過將非關鍵資源的載入推遲到需要時才加載，我可以顯著縮短初始頁面載入時間。這是我如何實現映像延遲載入的範例：

<img  src="/static/imghwm/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="減少 JavaScript 包大小並提高效能的成熟技術" >



<p>This code uses the Intersection Observer API to load images only when they're about to enter the viewport.</p>

<p>Lastly, I always perform bundle analysis to visualize my bundle composition and identify optimization opportunities. Tools like webpack-bundle-analyzer have been invaluable in this process. Here's how I typically set it up in my Webpack configuration:<br>
</p>

<pre class="brush:php;toolbar:false">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... other webpack config
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

這會產生一個互動式樹形圖，幫助我識別大型依賴項和潛在的最佳化區域。

這些技術一直幫助我減少 JavaScript 套件的大小，從而縮短載入時間並提高 Web 應用程式的效能。然而，值得注意的是，優化是一個持續的過程。隨著網路技術的發展，新的最佳化技術不斷出現，保持更新並相應地調整我們的策略至關重要。

我發現特別具有挑戰性的一個方面是平衡最佳化與開發速度。激進的優化有時會使程式碼庫更難維護或調試。例如，雖然縮小對於生產來說非常有用，但它會使調試變得更加困難。這就是為什麼我總是確保有可用於調試目的的來源映射。

我面臨的另一個挑戰是處理第三方函式庫。雖然我們可以優化自己的程式碼，但第三方依賴項通常是預先捆綁的，並且可以顯著增加我們的捆綁包大小。在這種情況下，我發現尋找替代的、更輕的庫或使用動態導入等技術僅在需要時加載這些庫很有幫助。

也值得一提的是，不同的應用程式可能會受益於不同的最佳化策略。例如，單一頁面應用程式 (SPA) 可能會從程式碼分割和延遲載入中受益更多，而更簡單的多頁面網站可能會更專注於縮小和壓縮。

實施這些最佳化時，衡量其影響至關重要。我總是在實施優化之前和之後進行效能審核，以確保它們達到預期的效果。像 Lighthouse 或 WebPageTest 這樣的工具在這方面非常有價值。

讓我們透過更複雜的範例更深入地了解其中一些技術。

對於 React 應用程式中的程式碼分割，我可能會使用 React.lazy 和 Suspense：

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

此設定允許單獨載入每個路由，從而減少初始套件大小。

對於 Tree Shaking，需要注意的是，它最適合使用 ES6 模組語法。以下是我如何建立實用程式模組以充分利用 Tree Shaking 的範例：

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

在這種情況下，如果減法和除法函數沒有在應用程式的其他地方使用，它們將從最終的套件中剔除。

當談到縮小時，現代建置工具通常預設包含此步驟。然而，有時我們可以透過調整設定來獲得更好的結果。例如，對於 Terser，我們可以使用以下配置：

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

此組態不僅縮小了程式碼，還刪除了控制台語句，這對生產建置很有幫助。

對於壓縮，雖然伺服器端配置至關重要，但我們也可以使用 webpack 外掛程式來預先壓縮我們的資源。 CompressionWebpackPlugin 非常適合這個：

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

此外掛程式將與原始資產一起建立資產的 gzip 壓縮版本，如果您的伺服器配置為使用它們，則可以更快地交付內容。

延遲載入不僅限於映像。我們可以將其應用於任何不立即需要的資源。例如，我們可能會延遲載入一個繁重的第三方函式庫：

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

這樣，圖表庫僅在使用者想要查看圖表時加載，從而保持我們的初始套件精簡。

在捆綁分析方面，所獲得的見解可能會帶來一些令人驚訝的最佳化。例如，我曾經發現日期格式庫為我的包增加了很大的重量。透過用一些涵蓋我們特定用例的自訂函數替換它，我能夠減少大量的套件大小：

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

這種透過捆綁分析進行的有針對性的最佳化可以帶來顯著的效能提升。

總之，優化 JavaScript 套件大小是一個多方面的過程，需要充分了解應用程式的結構和需求。透過實施這些技術——程式碼分割、樹搖動、縮小、壓縮、延遲載入和套件分析——我們可以顯著減小套件大小並提高應用程式效能。請記住，我們的目標不僅僅是擁有更小的捆綁包，而是為我們的用戶提供更快、更有效率的體驗。隨著我們不斷突破網路可能性的界限，這些優化技術只會變得更加重要。

---

101 本書

101 Books是一家由人工智慧驅動的出版公司，由作家Aarav Joshi共同創立。透過利用先進的人工智慧技術，我們將出版成本保持在極低的水平——一些書籍的價格低至 4 美元——讓每個人都能獲得高品質的知識。

查看我們的書Golang Clean Code，亞馬​​遜上有售。

請繼續關注更新和令人興奮的消息。購買書籍時，搜尋 Aarav Joshi 以尋找更多我們的書籍。使用提供的連結即可享受特別折扣！

我們的創作

一定要看看我們的創作：

投資者中心 | 投資者中央西班牙語 | 投資者中德意志 | 智能生活 | 時代與迴響 | 令人費解的謎團 | 印度教 | 菁英發展 | JS學校

---

我們在媒體上

科技無尾熊洞察 | 時代與迴響世界 | 投資人中央媒體 | 令人費解的謎團 | | 令人費解的謎團 | >科學與時代媒介 |

現代印度教

以上是減少 JavaScript 包大小並提高效能的成熟技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！