webpack的优化

减少打包体积
Tree Shaking
Tree Shaking: 通过删除未使用的代码来减小打包体积。确保代码是ES6模块，并启用生产环境配置。

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

代码拆分 (Code Splitting)
代码拆分 (Code Splitting): 通过将代码拆分成多个bundle来实现按需加载，例如使用import()动态加载模块。

// 动态引入模块
import('./module').then(module => {
  module.default();
});

压缩代码
压缩JavaScript：使用TerserWebpackPlugin来压缩JavaScript文件。

// webpack.config.js
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserWebpackPlugin()],
  },
};

压缩CSS：使用OptimizeCSSAssetsWebpackPlugin来压缩CSS文件。

// webpack.config.js
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

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

删除无用CSS
PurgeCSS: 使用purgecss-webpack-plugin来删除未使用的CSS。

// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
    }),
  ],
};

提高构建速度
DLL Plugin
DLL Plugin: 使用DLLPlugin和DLLReferencePlugin将依赖包预编译成一个独立的包，以减少构建时间。

// webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom'],
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]_library',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_library',
      path: path.join(__dirname, 'dll', '[name]-manifest.json'),
    }),
  ],
};

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname, 'dll'),
      manifest: require('./dll/vendor-manifest.json'),
    }),
  ],
};

多线程/并行构建
Thread-loader: 使用thread-loader来开启多线程构建。

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

HappyPack: 使用HappyPack来并行构建。

// webpack.config.js
const HappyPack = require('happypack');

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

缓存
缓存Loader：使用cache-loader或babel-loader的缓存功能来提高构建速度。

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

优化开发体验
热模块替换 (HMR)
HMR: 使用webpack-dev-server和HotModuleReplacementPlugin来实现热模块替换，提高开发效率。

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  devServer: {
    contentBase: './dist',
    hot: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

其他优化
分析工具
Bundle Analyzer: 使用webpack-bundle-analyzer来可视化分析你的bundle，找出大文件和依赖。

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

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

通过这些优化方法，你可以有效地减小打包体积、提高构建速度和改善开发体验。

webpack的优化

推荐阅读更多精彩内容