Почему размер пакета ReactJS в режиме разработки меньше, чем в рабочем режиме? - PullRequest
Новая
       8

Почему размер пакета ReactJS в режиме разработки меньше, чем в рабочем режиме?

0 голосов
/ 19 октября 2018

Я пытаюсь создать свою собственную конфигурацию Webpack для проекта ReactJS, я начал с одного компонента, который отображает один 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"
  }
}

1 Ответ

0 голосов
/ 20 октября 2018

Причиной этой проблемы являются inline-source-maps.Отключение их для обоих режимов development и production дало 111KB размер vendor.bundle.js для режима development и 101KB в режиме production.Более того, использование исходных карт в производстве обычно является плохой практикой.

...