Question

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

配置似乎工作得很好，但是开发模式下的捆绑包大小小于生产模式。

如果我将module.exports.mode = "production"的束大小设为411KB，并将模式更改为“开发”后，捆绑包尺寸减小为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

此问题背后的原因是内联源映射。在development和production两种模式下都禁用它们，111KB模式的vendor.bundle.js大小为development，101KB模式的production大小为CRAWLERA_ENABLED。而且，在生产环境中启用源地图通常是一个坏习惯。

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

1 个答案: