Reactjs 正在尝试捆绑first React应用程序-捆绑包太大_Reactjs_Webpack

Reactjs 正在尝试捆绑first React应用程序-捆绑包太大

reactjs webpack

Reactjs 正在尝试捆绑first React应用程序-捆绑包太大,reactjs,webpack,Reactjs,Webpack,我有第一个react应用程序-使用开发者模式和devtool时为5.5Mb：“源地图”。现在我试着为分发模式编写网页包，如下所示： var webpack = require('webpack'); var path = require('path'); var fs = require('fs') var BUILD_DIR = path.resolve(__dirname, 'public/javascripts'); var APP_DIR = path.resolve(__dirnam

我有第一个react应用程序-使用开发者模式和devtool时为5.5Mb：“源地图”。现在我试着为分发模式编写网页包，如下所示：

var webpack = require('webpack');
var path = require('path');
var fs = require('fs')

var BUILD_DIR = path.resolve(__dirname, 'public/javascripts');
var APP_DIR = path.resolve(__dirname, 'frontend');

const babelSettings = JSON.parse(fs.readFileSync(".babelrc"))
var config = {
    entry: APP_DIR + '/app.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js',
    },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                use : ['babel-loader']
            }
            ,
            {
                test: /\.css$/,
                use: ["style-loader",{
                    loader: "css-loader",
                    options: {
                        minimize: true
                    }
                }],

            },
            {
                test: /\.less$/,
                use: ["style-loader,less-loader"]
            },
            {
                test: /\.svg$/,
                loaders: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015']
                        }
                    },
                    {
                        loader: 'react-svg-loader',
                        query: {
                            jsx: true
                        }
                    }
                ],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: true
            }
        })
    ]

};

babelSettings.plugins.push("transform-react-inline-elements");
babelSettings.plugins.push("transform-react-constant-elements");


module.exports = config;

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-3": "^6.22.0",
    "babelify": "^7.3.0",
    "browserify": "^13.3.0",
    "css-loader": "^0.28.0",
    "exorcist": "^0.4.0",
    "gulp-livereload": "^3.8.1",
    "gulp-sourcemaps": "^2.4.0",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "react-edit-inline": "^1.0.8",
    "react-image-fallback": "^4.0.1",
    "react-scripts": "0.8.5",
    "redux-devtools-extension": "^2.13.0",
    "remote-redux-devtools": "^0.5.0",
    "riek": "^1.0.7",
    "style-loader": "^0.13.1",
    "svg-react-loader": "^0.4.0-beta.2",
    "vinyl-buffer": "^1.0.0",
    "watchify": "^3.8.0",
    "webpack": "^2.3.2"
  },
  "dependencies": {
    "axios": "^0.16.0",
    "barcoder": "^2.0.1",
    "escape-string-regexp": "^1.0.5",
    "frisbee": "^1.1.7",
    "i18next": "^5.0.0",
    "i18next-browser-languagedetector": "^1.0.1",
    "i18next-xhr-backend": "^1.3.0",
    "immutability-helper": "^2.1.1",
    "lodash": "^4.17.4",
    "qrcode.react": "^0.6.1",
    "rc-time-picker": "^2.3.3",
    "react": "^15.4.2",
    "react-autosuggest": "^8.0.0",
    "react-bootstrap": "^0.30.7",
    "react-cards": "^0.2.2",
    "react-collapse": "^2.3.3",
    "react-cookie": "^1.0.4",
    "react-dom": "^15.4.2",
    "react-dropzone": "^3.10.0",
    "react-height": "^2.2.0",
    "react-highlight-words": "^0.6.0",
    "react-i18next": "^2.0.0",
    "react-infinite-scroller": "^1.0.4",
    "react-input-autosize": "^1.1.0",
    "react-isolated-scroll": "^0.1.0",
    "react-loaders": "^2.3.0",
    "react-motion": "^0.4.7",
    "react-number-input": "^15.0.0-rc2",
    "react-numeric-input": "^2.0.7",
    "react-popover": "^0.4.4",
    "react-preload": "^0.5.0",
    "react-redux": "^5.0.2",
    "react-redux-form": "^1.5.4",
    "react-router-dom": "^4.0.0",
    "react-select": "^1.0.0-rc.3",
    "react-svg-loader": "^1.1.1",
    "react-switch-button": "^2.1.1",
    "react-tabs": "^0.8.2",
    "react-tagsinput": "^3.14.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "simple-react-pdf": "^1.0.6",
    "style-it": "^1.5.5",
    "throttle-debounce": "^1.0.1",
    "validator": "^6.2.1"
  },

我用以下方法运行它：

webpack --config webpack-dist.config.js -p --progress  --production --optimize-minimize

输出仍然是2.2Mb，这是不可接受的大小。我错过了什么配置

Edit packages.json如下所示：

var webpack = require('webpack');
var path = require('path');
var fs = require('fs')

var BUILD_DIR = path.resolve(__dirname, 'public/javascripts');
var APP_DIR = path.resolve(__dirname, 'frontend');

const babelSettings = JSON.parse(fs.readFileSync(".babelrc"))
var config = {
    entry: APP_DIR + '/app.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js',
    },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                use : ['babel-loader']
            }
            ,
            {
                test: /\.css$/,
                use: ["style-loader",{
                    loader: "css-loader",
                    options: {
                        minimize: true
                    }
                }],

            },
            {
                test: /\.less$/,
                use: ["style-loader,less-loader"]
            },
            {
                test: /\.svg$/,
                loaders: [
                    {
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015']
                        }
                    },
                    {
                        loader: 'react-svg-loader',
                        query: {
                            jsx: true
                        }
                    }
                ],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: true
            }
        })
    ]

};

babelSettings.plugins.push("transform-react-inline-elements");
babelSettings.plugins.push("transform-react-constant-elements");


module.exports = config;

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-3": "^6.22.0",
    "babelify": "^7.3.0",
    "browserify": "^13.3.0",
    "css-loader": "^0.28.0",
    "exorcist": "^0.4.0",
    "gulp-livereload": "^3.8.1",
    "gulp-sourcemaps": "^2.4.0",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "react-edit-inline": "^1.0.8",
    "react-image-fallback": "^4.0.1",
    "react-scripts": "0.8.5",
    "redux-devtools-extension": "^2.13.0",
    "remote-redux-devtools": "^0.5.0",
    "riek": "^1.0.7",
    "style-loader": "^0.13.1",
    "svg-react-loader": "^0.4.0-beta.2",
    "vinyl-buffer": "^1.0.0",
    "watchify": "^3.8.0",
    "webpack": "^2.3.2"
  },
  "dependencies": {
    "axios": "^0.16.0",
    "barcoder": "^2.0.1",
    "escape-string-regexp": "^1.0.5",
    "frisbee": "^1.1.7",
    "i18next": "^5.0.0",
    "i18next-browser-languagedetector": "^1.0.1",
    "i18next-xhr-backend": "^1.3.0",
    "immutability-helper": "^2.1.1",
    "lodash": "^4.17.4",
    "qrcode.react": "^0.6.1",
    "rc-time-picker": "^2.3.3",
    "react": "^15.4.2",
    "react-autosuggest": "^8.0.0",
    "react-bootstrap": "^0.30.7",
    "react-cards": "^0.2.2",
    "react-collapse": "^2.3.3",
    "react-cookie": "^1.0.4",
    "react-dom": "^15.4.2",
    "react-dropzone": "^3.10.0",
    "react-height": "^2.2.0",
    "react-highlight-words": "^0.6.0",
    "react-i18next": "^2.0.0",
    "react-infinite-scroller": "^1.0.4",
    "react-input-autosize": "^1.1.0",
    "react-isolated-scroll": "^0.1.0",
    "react-loaders": "^2.3.0",
    "react-motion": "^0.4.7",
    "react-number-input": "^15.0.0-rc2",
    "react-numeric-input": "^2.0.7",
    "react-popover": "^0.4.4",
    "react-preload": "^0.5.0",
    "react-redux": "^5.0.2",
    "react-redux-form": "^1.5.4",
    "react-router-dom": "^4.0.0",
    "react-select": "^1.0.0-rc.3",
    "react-svg-loader": "^1.1.1",
    "react-switch-button": "^2.1.1",
    "react-tabs": "^0.8.2",
    "react-tagsinput": "^3.14.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "simple-react-pdf": "^1.0.6",
    "style-it": "^1.5.5",
    "throttle-debounce": "^1.0.1",
    "validator": "^6.2.1"
  },

使用“优秀”来查看构建中占用空间的内容

另外，在运行webpack之前，请尝试设置

NODE\u ENV=production

，这会产生不同。

对于我（使用webpack 4）来说，减少的捆绑包大小增加了什么

module.exports = {
    mode: 'production', // ← this
    ...
}

（在webpack.config.js中）。从大约1 MB到158 kB。

您能否澄清webpack.config.js中是否可以使用

NODE_ENV=production

？它给了我

production

在

npm run build

上没有定义错误，所以我想这不是正确的地方。另外，它是否会产生与我在回答中提出的不同的效果？需要一个shell环境设置，但您可以执行

process.env.NODE\u env='production'

。这会有所不同