Webpack性能優化

一、代碼分割

代碼分割能夠將代碼分成多個塊，按需載入，從而提高載入速度和性能。Webpack通過import()函數或require.ensure()實現代碼分割。

// 使用import()函數實現代碼分割
import('./math').then(math => {
  console.log(math.add(16, 26));
});
  
// 使用require.ensure()實現代碼分割
require.ensure(['./math'], function(require) {
  const math = require('./math');
  console.log(math.add(16, 26));
});

使用webpack-bundle-analyzer工具可以分析代碼分割後的模塊組成，從而優化代碼分割策略。

二、Tree Shaking

Tree Shaking是指刪除沒有使用的代碼，從而減小打包後的代碼體積。開啟Tree Shaking需要ES6的模塊引入方式，並在webpack配置文件中開啟壓縮模式。

// math.js
export function add(a, b) {
  return a + b;
}

export function square(a) {
  return a * a;
}

// app.js
import { add } from './math';

console.log(add(16, 26));

三、懶載入

懶載入能夠將頁面劃分成多個區域，在需要載入時再請求資源，提高了初始載入速度和性能。Webpack可以使用動態import語法實現懶載入。

// 使用動態import語法實現懶載入
document.getElementById('btn').addEventListener('click', () => {
  import('./lazy-loaded-module').then(module => {
    // 使用模塊
  });
});

四、緩存

使用合理的緩存策略能夠減少網路請求，提升性能。Webpack通過output.filename屬性設置文件名，通過output.chunkFilename屬性設置代碼分割後的文件名。

//webpack.config.js

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].js'
}

五、優化Loader

Webpack的Loader是打包過程中用於處理文件的轉換器。優化Loader可以減小打包時間和提高性能。以下是一些優化Loader的方法：

1、使用include/exclude設置匹配規則

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],
        loader: 'babel-loader'
      }
    ]
  }
};

2、儘可能使用Loader默認配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  }
};

3、儘可能使用最小化的Loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            // 儘可能使用最小化的babel-preset-env
            presets: [['env', { modules: false }]]
          }
        }
      }
    ]
  }
};

4、使用HappyPack並行處理Loader

const HappyPack = require('happypack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js'
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threads: 4,
      loaders: ['babel-loader']
    })
  ]
};

5、使用緩存Loader結果

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

六、優化Resolve

使用優化路徑解析的Resolve配置項能夠減少查找時間，提高性能。並通過extensions配置項減小文件查找範圍。

module.exports = {
  resolve: {
    // 配置別名，避免路徑深度影響性能
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    
    // 配置查找模塊的路徑，避免查找時間過長
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    
    // 啟用了擴展名的查找
    extensions: ['.js', '.json']
  }
};

七、優化DevServer

使用Webpack DevServer能夠提高開發效率和性能。以下方法可以優化DevServer：

1、利用內存減少IO操作

module.exports = {
  devServer: {
    // 解決多頁面刷新導致重新構建所有文件的問題
    lazy: false,
    // 將資源放入內存中，減少IO操作
    contentBase: false
  }
};

2、開啟Gzip壓縮

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin()
  ]
};

3、使用Hot Module Replacement（HMR）

module.exports = {
  devServer: {
    // 開啟HMR
    hot: true
  },
  plugins: [
    // Webpack內置的HMR插件
    new webpack.HotModuleReplacementPlugin()
  ]
};

八、使用優化後的Loader和插件

以下是一些常見Loader和插件的優化：

1、babel-loader優化

使用babel-loader的cacheDirectory選項可以啟用緩存，減小編譯時間。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      }
    ]
  }
};

2、css-loader和style-loader優化

使用mini-css-extract-plugin插件可以把CSS提取成單獨的文件，減少JavaScript文件體積，提升載入速度。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 開啟HMR
              hmr: true,
              // 如果模塊是HMR能夠更新的，將導出到CSS否則將創建一個新的樣式唯一URL
              reloadAll: true
            }
          },
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ]
};

3、html-webpack-plugin優化

使用html-webpack-plugin的template選項可以指定HTML模板路徑，從而減小編譯速度。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

4、UglifyJsPlugin優化

使用terser-webpack-plugin代替UglifyJsPlugin，可以提高壓縮速度和縮小代碼大小。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // 必須啟用，否則將影響調試
      })
    ]
  }
};