为什么开发模式下的 ReactJS bundle大小小于生产模式?

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两种模式禁用它们111KBdevelopment模式和production模式下101KB的vendor.bundle.js大小。此外，在生产中启用源映射通常是一种不好的做法。