Question

我有一个小的React项目。 Webpack生成的bundle.js是6.3Mb。如何将尺寸减小到<2.0Mb？（2Mb仍然很大但可以接受）。完整的源代码位于github

webpack.config.js

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        './app/components/app.jsx'
    ],
    output: {
        path: './public',
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'app'],
        extensions: ['', '.js', '.jsx', '.scss']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['happypack/loader']
            },
            {
                test: /\.scss$/,
                loaders: [
                    'style',
                    'css',
                    'autoprefixer?browsers=last 3 versions',
                    'sass?outputStyle=expanded'
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'url?limit=8192',
                    'img'
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new HtmlWebpackPlugin({
            title: 'Fullstack Rebel',
            template: './app/templates/index_template.ejs'
        }),
        new HappyPack({
            loaders: ['babel?presets[]=react,presets[]=es2015']
        })
    ]
};

的package.json

{
  "name": "fullstackcms",
  "version": "0.0.1",
  "description": "A Content Management System Made of NodeJS, MongoDB, React, Redux and Bootstrap",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --colors"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/dsun29/fullstackcms"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer-loader": "^3.1.0",
    "body-parser": "^1.14.2",
    "connect-mongo": "^1.3.2",
    "css-loader": "^0.24.0",
    "express": "^4.13.3",
    "express-session": "^1.14.1",
    "file-loader": "^0.9.0",
    "history": "^1.17.0",
    "img-loader": "^1.2.2",
    "immutable": "^3.7.6",
    "jquery": "^3.1.0",
    "lodash": "^4.0.0",
    "mongodb": "^2.2.10",
    "node-sass": "^3.4.2",
    "node-twitter-api": "^1.8.0",
    "react": "^15.3.1",
    "react-bootstrap": "^0.30.3",
    "react-dom": "^15.3.1",
    "react-google-login": "^2.5.1",
    "react-modal-dialog": "^3.0.2",
    "react-redux": "^4.0.6",
    "react-router": "^2.7.0",
    "react-tinymce": "^0.5.1",
    "react-twitter-widgets": "^0.2.4",
    "redux": "^3.0.5",
    "redux-thunk": "^2.1.0",
    "reqwest": "^2.0.5",
    "routes": "^2.1.0",
    "sass-loader": "^4.0.1",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7"
  },
  "engines": {
    "node": "0.12.0"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.4.0",
    "babel-core": "^6.17.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.11.0",
    "babel-regenerator-runtime": "^6.5.0",
    "babel-register": "^6.16.3",
    "babel-runtime": "^6.11.6",
    "chai": "^3.4.1",
    "chai-immutable": "^1.5.3",
    "eslint": "^3.4.0",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.2.1",
    "eslint-plugin-react": "^6.2.0",
    "happypack": "^2.2.1",
    "html-webpack-plugin": "^2.22.0",
    "mocha": "^3.0.2",
    "react-hot-loader": "^3.0.0-beta.3",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.0"
  }
}

来自webpack-bundle-size-analyzer的一些结果

active-event-stack: 402.98 KB (17.3%)
  lodash: 401.81 KB (99.7%)
  <self>: 1.17 KB (0.292%)
react-bootstrap: 382.86 KB (16.4%)
  warning: 1.76 KB (0.461%)
  <self>: 381.1 KB (99.5%)
react-router: 156.83 KB (6.73%)
  history: 49.02 KB (31.3%)
    warning: 1.76 KB (3.60%)
    <self>: 47.26 KB (96.4%)
  warning: 1.76 KB (1.13%)
  query-string: 1.45 KB (0.922%)
  hoist-non-react-statics: 1.35 KB (0.864%)
  <self>: 103.24 KB (65.8%)
immutable: 139.14 KB (5.98%)
react-overlays: 69.06 KB (2.97%)
  warning: 1.76 KB (2.56%)
  <self>: 67.29 KB (97.4%)
dynamics.js: 60.12 KB (2.58%)
react-tinymce: 49.09 KB (2.11%)
  lodash: 43.66 KB (88.9%)
  <self>: 5.43 KB (11.1%)
babel-runtime: 45.11 KB (1.94%)
  core-js: 40.78 KB (90.4%)
  <self>: 4.33 KB (9.59%)
jss: 42.23 KB (1.81%)
fbjs: 32.61 KB (1.40%)
react-modal-dialog: 26.36 KB (1.13%)
redux: 22.36 KB (0.960%)
react-redux: 19.37 KB (0.832%)
reqwest: 18.76 KB (0.806%)
dom-helpers: 15.56 KB (0.668%)
lodash: 12.9 KB (0.554%)
uncontrollable: 9.57 KB (0.411%)
style-loader: 6.99 KB (0.300%)
css-vendor: 6.11 KB (0.263%)
react-prop-types: 6.04 KB (0.260%)
react-center-component: 5.87 KB (0.252%)
react-jss: 5.34 KB (0.229%)
node-libs-browser: 5.17 KB (0.222%)
  process: 5.17 KB (100%)
  <self>: 0 B (0.00%)
react-google-login: 3.99 KB (0.171%)
deep-equal: 3.8 KB (0.163%)
keycode: 2.7 KB (0.116%)
object-assign: 1.95 KB (0.0836%)
invariant: 1.48 KB (0.0636%)
css-loader: 1.47 KB (0.0632%)
jss-vendor-prefixer: 1.39 KB (0.0596%)
jss-nested: 1.18 KB (0.0506%)
jss-camel-case: 1.13 KB (0.0484%)
hoist-non-react-statics: 1.09 KB (0.0470%)
classnames: 1.08 KB (0.0462%)
symbol-observable: 1.07 KB (0.0461%)
jss-px: 936 B (0.0393%)
redux-thunk: 529 B (0.0222%)
webpack: 251 B (0.0105%)
strict-uri-encode: 182 B (0.00763%)
react-dom: 63 B (0.00264%)
is-browser: 22 B (0.000923%)
reqwest xhr2: 15 B (0.000629%)
<self>: 119.37 KB (5.13%)

Answer 1

您可以做几件事。我建议创建两个webpack配置。首先是我们不关心捆绑尺寸的开发，而第二次是生产，其中捆绑将被优化。

完全删除source-map（删除devtool行）。您在生产模式下不需要它。

使用生产模式。将此条目添加到插件

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    })
],

使用webpack -p构建
要最小化库的大小，您应该只导入那些函数你用。例如，如果你需要一些像lodash这样的函数 forEach, orderBy, map。
```
import forEach from 'lodash/forEach'
import orderBy from 'lodash/orderBy'
import map from 'lodash/map'
```

Answer 2

由于源地图，您的捆绑包很大。创建捆绑包时，请删除以下行：

<script>
    $(document).click(function (e) {
        var $e = $(e.target);
        if (!$e.parents().hasClass('menu')) {
           $('.menu').css({ 'display': 'none' });
        }
    });
</script>

这也会在开发过程中删除源映射，所以可以在package.json中执行类似的操作：

“scripts”：{ “dev”：“webpack-dev-server --colors”， “build”：“webpack -p” }，

Webpack -p将启动webpack的构建模式，并且还会缩小代码，使其更小。

在你的webpack.config.js中：

devtool: 'inline-source-map'

这将在构建时删除源地图。

有更好的方法可以识别构建，例如NODE_ENV，如果您需要生产中的源地图，则应该查看devtool options。

Answer 3

您正在使用＆＃39; inline-source-map＆＃39;作为devtool选项。这会在您的包中添加源映射，这实际上比代码本身更大。尝试使用webpack文档中的其他选项。

Answer 4

某些人可能仍然对此很感兴趣，所以我将给出一个附加答案...

V16中引入的反应功能组件（也称为React钩子）比基于类的组件使用更少的代码，所以这是另一种选择

Answer 5

古老的问题，但会问对active-event-stack的需求，这似乎是一个巨大的问题。如果是子依赖项，请考虑其他事项。另外，您正在使用的引导程序库很大，您也许可以只使用所需的特定组件并减少输出。

评论，得到这个答案的原因是，我有一个使用material-ui的应用程序，其中包含一些组件和一些路由器交互，并且我的未压缩捆绑包大小为873k（包括样式和一对图像）。您还应该gzip它，并通过网络服务器将其压缩。我压缩的是（180KB）... YMMV。

React / Redux bundle.js太大了

5 个答案: