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

Question

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

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

如果我把module.exports.mode = "production"包大小为411KB ，将模式更改为“development”后，包大小减少到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

这个问题背后的原因是 inline-source-maps。 在两种模式development和production禁用它们， development模式下的vendor.bundle.js大小为111KB ， production模式下为101KB 。 此外，在生产中启用源映射通常是一种不好的做法。