Webpack新特性詳解及效能優化實踐-js教程-PHP中文網

Detailed explanation of new features of Webpack nd performance optimization practice

1. 長期緩存

Webpack 5 透過確定性的 Chunk ID、模組 ID 和匯出 ID 實現長期緩存，這意味著相同的輸入將始終產生相同的輸出。這樣，當您的用戶再次訪問更新後的網站時，瀏覽器可以重複使用舊的緩存，而不會重新下載所有資源。

// webpack.config.js
module.exports = {
    // ...
    output: {
        // Use contenthash to ensure that the file name is associated with the content
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].chunk.js',
        // Configure the asset hash to ensure long-term caching
        assetModuleFilename: '[name].[contenthash][ext][query]',
        // Use file system cache
        cache: {
            type: 'filesystem',
        },
    },
    // ...
};

登入後複製

2. Tree Shaking 優化

Webpack 5 增強了 Tree Shaking 的效率，特別是對 ESM 的支援。

// package.json
{
    "sideEffects": false, // Tell Webpack that this package has no side effects and can safely remove unreferenced code
}

// library.js
export function myLibraryFunction() {
// ...
}

// main.js
import { myLibraryFunction } from './library.js';

登入後複製

3. 連接模組

Webpack 5 的 concatenateModules 選項可以組合小模組來減少 HTTP 請求的數量。不過這個功能可能會增加記憶體消耗，所以使用時需要權衡一下：

    // webpack.config.js
    module.exports = {
    // ...
    optimization: {
        concatenateModules: true, // Defaults to true, but may need to be turned off in some cases
    },
    // ...
    };

登入後複製

4. Node.js 模組 Polyfills 移除

Webpack 5 不再自動為 Node.js 核心模組注入 polyfill。開發者需根據目標環境手動導入：

// If you need to be compatible with older browsers, you need to manually import polyfills
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// Or use babel-polyfill
import '@babel/polyfill';

登入後複製

5. 效能優化實踐

使用快取：設定cache.type:'filesystem'使用檔案系統快取來減少重複建置。
SplitChunks 最佳化：依照專案需求調整 optimization.splitChunks，例如：

// webpack.config.js
module.exports = {
// ...
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 10000, // Adjust the appropriate size threshold
            maxSize: 0, // Allow code chunks of all sizes to be split
        },
    },
    // ...
};

登入後複製

模組解析最佳化：透過resolve.mainFields和resolve.modules配置減少模組解析的開銷。
並行編譯：使用threads-loader或worker-loader並行處理任務，加快編譯速度。
程式碼分割：使用動態導入（import()）隨選載入程式碼，減少初始載入時間。

// main.js
import('./dynamic-feature.js').then((dynamicFeature) => {
    dynamicFeature.init();
});

登入後複製

Module Federation：使用 webpack.container.module 配置實現跨應用程式的程式碼共享，減少重複打包。

// webpack.config.js
module.exports = {
    // ...
    experiments: {
        outputModule: true, // Enable output module support
    },
    // ...
};

登入後複製

6、Tree Shaking的深入應用

雖然Webpack 5本身對Tree shake進行了最佳化，但開發者可以透過一些策略進一步提高其效果。確保您的程式碼遵循以下原則：

避免全域變數污染：全域變數可以防止 Tree shake 辨識未使用的程式碼。
使用純函數：確保函數沒有副作用，以便Webpack可以安全地刪除未呼叫的函數。
明確導出：使用明確導出（export const func = ... 而不是導出預設 func）有助於 Tree shake 更準確地工作。
死碼消除：結合ESLint的no-unused-vars規則，確保沒有未使用的導入。

7.Loader和Plugin優化

減少 Loader 使用：每個 Loader 都會增加建置時間。僅在必要時使用Loaders，並考慮是否可以合併某些Loaders的功能。
載入器快取：確保載入器支援並啟用緩存，例如使用cacheDirectory選項。
選擇高效率的外掛程式：有些外掛程式可能對效能影響較大。評估並選擇性能更好的替代方案，或調整其配置以減少開銷。

8. Source Map策略

來源映射對於偵錯至關重要，但它也會增加建置時間和輸出大小。您可以依照環境調整Source Map類型：

// webpack.config.js
module.exports = {
    // ...
    output: {
        // Use contenthash to ensure that the file name is associated with the content
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].chunk.js',
        // Configure the asset hash to ensure long-term caching
        assetModuleFilename: '[name].[contenthash][ext][query]',
        // Use file system cache
        cache: {
            type: 'filesystem',
        },
    },
    // ...
};

登入後複製

9. 圖片及靜態資源處理

Asset Modules：Webpack 5引入了Asset Modules，可以直接處理圖片等靜態資源，無需額外配置Loader。此功能可以簡化配置並提高效能。

// package.json
{
    "sideEffects": false, // Tell Webpack that this package has no side effects and can safely remove unreferenced code
}

// library.js
export function myLibraryFunction() {
// ...
}

// main.js
import { myLibraryFunction } from './library.js';

登入後複製