[英]Why ReactJS bundle size in development mode is smaller than production mode?
I'm trying to create my own Webpack configuration for a ReactJS project, I started with one component that displays single div.我正在尝试为 ReactJS 项目创建自己的 Webpack 配置,我从一个显示单个 div 的组件开始。
The configuration seems to work pretty well, but the bundle size in development mode is smaller than production mode.配置似乎工作得很好,但开发模式下的包大小小于生产模式。
If I put module.exports.mode = "production"
the bundle size is 411KB
, and after changing the mode to "development" the bundle size reduced to 283KB
如果我把
module.exports.mode = "production"
包大小为411KB
,将模式更改为“development”后,包大小减少到283KB
This is my webpack.config.js
file:这是我的
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" } } } } };
This is the index.jsx
file:这是
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
file: 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" } }
The reason behind this problem are inline-source-maps.这个问题背后的原因是 inline-source-maps。 Disabling them for both modes
development
and production
gave 111KB
size of vendor.bundle.js
for development
mode and 101KB
in production
mode.在两种模式
development
和production
禁用它们, development
模式下的vendor.bundle.js
大小为111KB
, production
模式下为101KB
。 Moreover, enabling source-maps in production is usually a bad practice.此外,在生产中启用源映射通常是一种不好的做法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.