reactjs - 为什么在 webpack 构建后我的基本 React 应用程序很重？

Question

我有一个基本的 React 应用程序（2 个小页面和一个 redux 商店），它应该很轻。但是在构建最终包时，webpack 告诉我包是 1.12 MiB，而建议的限制是 244 KiB。然而，我已经通过 Terser 插件和代码拆分进行了优化。

这是我的 webpack.config.js：

const path = require("path"); 
const TerserPlugin = require("terser-webpack-plugin"); 
const Dotenv = require("dotenv-webpack"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 

module.exports = () => {
  const env = require("dotenv").config({ path: __dirname + "/.env" }); 
  return {
    mode: "development",
    entry: "./src/Index.js",
    output: {
      path: path.join(__dirname, "./dist"),
      filename: "[name].[hash].bundle.js", 
      publicPath: "/",
    },
    resolve: {
      extensions: [".js", "jsx", ".json"], 
      alias: {
        components: path.resolve(__dirname, "src/components/"), 
        pages: path.resolve(__dirname, "src/pages/"),
        store: path.resolve(__dirname, "src/store/"),
        src: path.resolve(__dirname, "src/"),
      },
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        },
        { test: /\.css$/, use: ["style-loader", "css-loader"] },
        { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
        { test: /\.html$/, use: [{ loader: "html-loader" }] },
      ],
    },
    devServer: {
      historyApiFallback: true, 
      port: 3000, 
      hot: true, 
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
      }),
      new Dotenv(),
    ],
    optimization: {
      minimize: true, 
      minimizer: [new TerserPlugin()], 
      splitChunks: { chunks: "all" },
    },
  };
};

这是我的 package.json：

{
  "name": "app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production",
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/plugin-transform-runtime": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "dotenv-webpack": "^1.8.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "terser-webpack-plugin": "^3.0.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

如何解决这个问题？

标签： reactjswebpack