webpack打包最佳化方案

时光独醒發表於2024-04-18
Web

以下是一些常見的webpack打包最佳化方案：

1.使用生產模式（production mode）：

// webpack.config.js
module.exports = {
  mode: 'production',
  // ... 其他配置
};

2.程式碼分割（Code Splitting）：

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

3.快取（Caching）：

// webpack.config.js
module.exports = {
  // ...
  output: {
    filename: '[name].[contenthash].bundle.js',
    chunkFilename: '[name].[contenthash].chunk.js',
  },
};

4.使用非同步匯入（Async Import）：

// 在需要按需載入的地方使用動態匯入
import('./SomeModule').then(module => {
  // do something with the module
});

5.使用HardSourcePlugin來快取模組解析結果：

// webpack.config.js
const HardSourcePlugin = require('hard-source-webpack-plugin');
 
module.exports = {
  // ...
  plugins: [
    new HardSourcePlugin(),
  ],
};

6.使用uglifyjs-webpack-plugin或terser-webpack-plugin進行更深層次的程式碼壓縮：

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
 
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({ /* 更多配置 */ })],
  },
};

7.最佳化loader配置，比如使用cache-loader來快取Babel編譯結果：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['cache-loader', 'babel-loader'],
        exclude: /node_modules/,
      },
      // ... 其他規則
    ],
  },
};

8.使用webpack-bundle-analyzer外掛分析bundle大小：

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static', // 分析結果以靜態頁面的形式開啟
    }),
  ],
};

相關文章