Webpack 优化技巧

代码分割

入口分割

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  }
};

动态导入

1
2
3

import('./module.js').then(module => {
  // 使用模块
});

缓存

文件名哈希

1
2
3

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

运行时 chunk

1
2
3

optimization: {
  runtimeChunk: 'single'
}

压缩

Terser

optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()]
}

CSS 压缩

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
};

Tree Shaking

module.exports = {
  mode: 'production', // 自动启用
  optimization: {
    usedExports: true
  }
};

分析包大小

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

外部依赖

1
2
3

externals: {
  jquery: 'jQuery'
}

总结

Webpack 优化提升构建性能和用户体验。定期分析和调整。