如何使用 webpack 减少 react 的 bundle.js 文件大小答案

【问题标题】：How to reduce bundle.js file size of react using webpack如何使用 webpack 减少 react 的 bundle.js 文件大小
【发布时间】：2019-07-06 22:02:43
【问题描述】：

我正在使用 webpack 构建我的 react 应用程序，它创建了 4 Mb 大小的 bundle.js，它非常大，如何减小这个大小，这是我的 webpack.config.js，我还应该使用什么插件

我正在使用的插件列表，请推荐其他有助于减少捆绑文件大小的插件，或者我的配置有什么问题。

var compressionPlugin = require('compression-webpack-plugin');
var copyWebpackPlugin = require('copy-webpack-plugin');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// Setup config.
module.exports = {
  devServer: {
    port: API === 'local' ? 8081 : 8080
  },
  devtool: DEBUG ? 'inline-source-map' : false,
  entry: [
    'whatwg-fetch',
    path.join(__dirname, PATH)
  ],
  module: {
    loaders: [
      {
        exclude: /(bower_components|node_modules)/,
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-class-properties',
            'transform-object-rest-spread',
            'transform-runtime'
          ],
          presets: ['latest', 'react']
        },
        test: /\.jsx?$/
      },
      {
        test: /\.scss?$/,
        use: CssPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        loader: 'worker-loader',
        options: {
          name: '[name].js',
          inline: true
        },
        test: /\.worker\.js$/
      }
    ]
  },
  output: {
    filename: '[name].bundle.[chunkhash].js',
    path: path.join(__dirname, './dist'),
    chunkFilename: "[name].[chunkhash].js",
    publicPath: '/'
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

【问题讨论】：

您是创建了生产版本还是使用开发版本测量了大小？通常生产构建不包括源映射并缩小您的代码。这将减少您的构建大小。 4Mb 看起来您正在构建中包含源映射。
DEBUG 常量在哪里以及如何定义？我想如果你以NODE_ENV=production webpack 运行它，文件大小会更小。如果没有，您需要查看您正在使用的依赖项。

标签： javascript reactjs webpack webpack-cli

【解决方案1】：

您应该使用 webpack-bundle-analyzer 分析您的 bundle 以确定原因。然后你可以split your bundle。我发现 react lazy 是一个不错的选择。

最后，你可以尝试一些 webpack 插件来减少你的包，例如：compression-webpack-plugin、dedupe-plugin、uglifyjs-plugin、ignore-plugin

【讨论】：