javascript - 为什么开发模式下的 ReactJS 包大小比生产模式小？

Question

我正在尝试为 ReactJS 项目创建自己的 Webpack 配置，我从一个显示单个 div 的组件开始。

该配置似乎工作得很好，但开发模式下的包大小比生产模式小。

如果我输入module.exports.mode = "Production"， bundle 大小为411KB， 将模式更改为“开发”后， bundle 大小减少到 283KB

这是我的 webpack.config.js 文件:

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

module.exports = {
    // mode: 'production',
    mode: 'development',
    entry: {
        index: './src/index.jsx'
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    plugins: [
        new CleanWebpackPlugin([path.resolve(__dirname, './dist')]),
        new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),
        new HtmlWebpackPlugin({hash: true})
    ],
    devtool: 'inline-source-map',
    module: {
        rules: [{
            test: /(\.js|\.jsx)$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader'
            }
        }, {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            use: ['sass-loader']
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            use: ['file-loader']
        }, {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: ['file-loader']
        }]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    }
};
   

这是index.jsx文件:

import {Component} from 'react';
import {render} from 'react-dom';

class App extends Component {
    render() {
        return <div>David</div>
    }
}

let app = document.createElement("div");
app.setAttribute("id", "app");
document.body.appendChild(app);
render(<App/>, document.querySelector('#app'));

package.json 文件:

{
  "name": "simple-app",
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack -p --progress --config webpack.config.js", // bundle size: 411KB
    "build-stg": "webpack --progress --config webpack.config.js" // bundle size: 283KB
  },
  "dependencies": {
    "@material-ui/core": "^3.2.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^0.1.19",
    "compression-webpack-plugin": "^2.0.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.21.0",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.1.2"
  }
}

Answer 1

这个问题背后的原因是内联源映射。在开发和生产模式下禁用它们会为开发提供111KB大小的vendor.bundle.js 模式和生产 模式下的101KB。此外，在生产中启用源映射通常是一种不好的做法。