Reactjs 网页包-误解和大型捆绑包

我很难设置正确的网页配置。我的developmentbundle.js达到14.6mb，而我的产品是23mb。我的源代码的大小只有455kb（js、css、图像）。。。因此，这似乎是远远不够的，更不用说产品比开发包更大了。此外，一些图像似乎被扭曲/拉伸。我无法真正理解到底发生了什么（是的，我为此花了很多时间在谷歌上），或者如何正确设置我的网页配置以进行适当的优化

编辑1 这似乎是一个丑陋的问题。当我取出它时，构建是6MB

编辑2 优化了构建并将其降至2mb，仍在为更高效的解决方案而努力

var path = require('path');
var webpack = require('webpack');
var merge = require('merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var webpackConfig = {
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

if (process.env.NODE_ENV === 'production') {

  webpackConfig = merge(webpackConfig,{
    devtool: "source-map",
    entry : [
      './src/client/index.js'
    ],
    module: {
      loaders: [{
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        include: __dirname
      },
      { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'},
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap') }
    ]},
    plugins : [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('production')
        }
      }),
      new ExtractTextPlugin("app.css"),
      new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]  
  });

}else{

  webpackConfig = merge(webpackConfig,{
    devtool: 'inline-source-map',
    module: {
      loaders: [{
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        include: __dirname,
        query: {
          optional: ['runtime'],
          stage: 2,
          env: {
            development: {
              plugins: [
                'react-transform'
              ],
              extra: {
                'react-transform': {
                  transforms: [{
                    transform:  'react-transform-hmr',
                    imports: ['react'],
                    locals:  ['module']
                  },
                  {
                    transform: 'react-transform-catch-errors',
                    imports: ['react','redbox-react' ]
                  }
                ]}
              }
            }
          }
        }
      },
      { test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'},
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]},
    entry : [
      'webpack-hot-middleware/client',
      './src/client/index.js'
    ],
    plugins : [
      new webpack.HotModuleReplacementPlugin()
    ]  
  });

}

module.exports = webpackConfig;

网页包包大小分析器：

plotly.js: 2.59 MB (46.6%)
  <self>: 2.59 MB (100%)
react: 590.99 KB (10.4%)
  <self>: 590.99 KB (100%)
lodash: 481.66 KB (8.46%)
  <self>: 481.66 KB (100%)
react-bootstrap: 275.43 KB (4.84%)
  <self>: 275.43 KB (100%)
leaflet: 217.5 KB (3.82%)
  <self>: 217.5 KB (100%)
core-js: 154.18 KB (2.71%)
  <self>: 154.18 KB (100%)
immutable: 139.19 KB (2.44%)
  <self>: 139.19 KB (100%)
react-leaflet: 100.1 KB (1.76%)
  <self>: 100.1 KB (100%)
react-router: 72.15 KB (1.27%)
  <self>: 72.15 KB (100%)
lodash-compat: 67.98 KB (1.19%)
  <self>: 67.98 KB (100%)
react-overlays: 63.65 KB (1.12%)
  react-prop-types: 2.94 KB (4.61%)
    <self>: 2.94 KB (100%)
  <self>: 60.72 KB (95.4%)
history: 46.16 KB (0.810%)
  <self>: 46.16 KB (100%)
buffer: 41.91 KB (0.736%)
  isarray: 132 B (0.308%)
    <self>: 132 B (100%)
  <self>: 41.78 KB (99.7%)
fbjs: 34.35 KB (0.603%)
  <self>: 34.35 KB (100%)
validator: 30.66 KB (0.538%)
  <self>: 30.66 KB (100%)
redux-router: 21.57 KB (0.379%)
  <self>: 21.57 KB (100%)
regenerator: 20.92 KB (0.367%)
  <self>: 20.92 KB (100%)
redux: 18.43 KB (0.324%)
  <self>: 18.43 KB (100%)
react-redux: 18.08 KB (0.317%)
  <self>: 18.08 KB (100%)
react-proxy: 16.81 KB (0.295%)
  <self>: 16.81 KB (100%)
dom-helpers: 15.56 KB (0.273%)
  <self>: 15.56 KB (100%)
redbox-react: 15.55 KB (0.273%)
  object-assign: 896 B (5.63%)
    <self>: 896 B (100%)
  <self>: 14.68 KB (94.4%)
whatwg-fetch: 9.69 KB (0.170%)
  <self>: 9.69 KB (100%)
uncontrollable: 8.71 KB (0.153%)
  <self>: 8.71 KB (100%)
error-stack-parser: 7.99 KB (0.140%)
  <self>: 7.99 KB (100%)
webpack-hot-middleware: 7.33 KB (0.129%)
  strip-ansi: 161 B (2.15%)
    <self>: 161 B (100%)
  ansi-regex: 145 B (1.93%)
    <self>: 145 B (100%)
  <self>: 7.03 KB (95.9%)
redux-undo: 7.29 KB (0.128%)
  <self>: 7.29 KB (100%)
redux-logger: 6.48 KB (0.114%)
  <self>: 6.48 KB (100%)
babel-runtime: 5.38 KB (0.0945%)
  <self>: 5.38 KB (100%)
style-loader: 5.38 KB (0.0944%)
  <self>: 5.38 KB (100%)
react-prop-types: 5.18 KB (0.0910%)
  <self>: 5.18 KB (100%)
deep-equal: 3.8 KB (0.0668%)
  <self>: 3.8 KB (100%)
react-transform-hmr: 3.6 KB (0.0633%)
  <self>: 3.6 KB (100%)
base64-js: 3.49 KB (0.0613%)
  <self>: 3.49 KB (100%)
stackframe: 3.4 KB (0.0597%)
  <self>: 3.4 KB (100%)
keycode: 2.67 KB (0.0470%)
  <self>: 2.67 KB (100%)
react-transform-catch-errors: 2.66 KB (0.0467%)
  <self>: 2.66 KB (100%)
process: 2.01 KB (0.0353%)
  <self>: 2.01 KB (100%)
ieee754: 2.01 KB (0.0352%)
  <self>: 2.01 KB (100%)
warning: 1.76 KB (0.0310%)
  <self>: 1.76 KB (100%)
invariant: 1.48 KB (0.0260%)
  <self>: 1.48 KB (100%)
query-string: 1.44 KB (0.0253%)
  <self>: 1.44 KB (100%)
react-deep-force-update: 1.26 KB (0.0222%)
  <self>: 1.26 KB (100%)
classnames: 1.08 KB (0.0189%)
  <self>: 1.08 KB (100%)
css-loader: 640 B (0.0110%)
  <self>: 640 B (100%)
redux-thunk: 375 B (0.00643%)
  <self>: 375 B (100%)
webpack: 251 B (0.00430%)
  <self>: 251 B (100%)
babel-core: 247 B (0.00424%)
  <self>: 247 B (100%)
global: 243 B (0.00417%)
  <self>: 243 B (100%)
isomorphic-fetch: 233 B (0.00400%)
  <self>: 233 B (100%)
strict-uri-encode: 182 B (0.00312%)
  <self>: 182 B (100%)
react-dom: 63 B (0.00108%)
  <self>: 63 B (100%)
<self>: 502.91 KB (8.83%)

plotly.js:2.59MB（46.6%）
：259 MB（100%）
反应：590.99 KB（10.4%）
：590.99 KB（100%）
lodash:481.66 KB（8.46%）
：481.66 KB（100%）
反应引导：275.43 KB（4.84%）
：275.43 KB（100%）
单张：217.5 KB（3.82%）
：217.5 KB（100%）
核心js:154.18KB（2.71%）
：154.18 KB（100%）
不变：139.19 KB（2.44%）
：139.19 KB（100%）
反应传单：100.1KB（1.76%）
：100.1KB（100%）
反应路由器：72.15KB（1.27%）
：72.15 KB（100%）
lodash compat:67.98 KB（1.19%）
：67.98 KB（100%）
反应覆盖：63.65 KB（1.12%）
反应道具类型：2.94 KB（4.61%）
：2.94KB（100%）
：60.72 KB（95.4%）
历史：46.16KB（0.810%）
：46.16 KB（100%）
缓冲区：41.91KB（0.736%）
isarray:132B（0.308%）
：132 B（100%）
：41.78 KB（99.7%）
fbjs:34.35 KB（0.603%）
：34.35 KB（100%）
验证器：30.66KB（0.538%）
：30.66 KB（100%）
redux路由器：21.57KB（0.379%）
：21.57 KB（100%）
再生器：20.92 KB（0.367%）
：20.92 KB（100%）
redux:18.43KB（0.324%）
：18.43 KB（100%）
反应还原：18.08 KB（0.317%）
：18.08 KB（100%）
反应代理：16.81 KB（0.295%）
：16.81 KB（100%）
dom帮助程序：15.56KB（0.273%）
：15.56 KB（100%）
红盒反应：15.55KB（0.273%）
对象分配：896 B（5.63%）
：896 B（100%）
：14.68 KB（94.4%）
whatwg获取：9.69KB（0.170%）
：9.69 KB（100%）
无法控制：8.71 KB（0.153%）
：8.71 KB（100%）
错误堆栈分析器：7.99 KB（0.140%）
：7.99 KB（100%）
网页包热中间件：7.33 KB（0.129%）
带ansi:161 B（2.15%）
：161 B（100%）
ansi正则表达式：145 B（1.93%）
：145 B（100%）
：7.03 KB（95.9%）
redux撤消：7.29 KB（0.128%）
：7.29 KB（100%）
redux记录器：6.48 KB（0.114%）
：6.48 KB（100%）
babel运行时：5.38KB（0.0945%）
：5.38 KB（100%）
样式加载器：5.38KB（0.0944%）
：5.38 KB（100%）
反应道具类型：5.18 KB（0.0910%）
：5.18 KB（100%）
深度相等：3.8KB（0.0668%）
：3.8KB（100%）
反应转换hmr:3.6KB（0.0633%）
：3.6KB（100%）
base64 js:3.49 KB（0.0613%）
：3.49 KB（100%）
堆栈帧：3.4KB（0.0597%）
：3.4KB（100%）
键码：2.67KB（0.0470%）
：2.67 KB（100%）
反应转换捕获错误：2.66 KB（0.0467%）
：2.66 KB（100%）
进程：2.01KB（0.0353%）
：2.01KB（100%）
ieee754:2.01KB（0.0352%）
：2.01KB（100%）
警告：1.76 KB（0.0310%）
：1.76 KB（100%）
不变量：1.48KB（0.0260%）
：1.48 KB（100%）
查询字符串：1.44KB（0.0253%）
：1.44 KB（100%）
反作用力深度更新：1.26 KB（0.0222%）
：1.26 KB（100%）
类名：1.08KB（0.0189%）
：1.08 KB（100%）
css加载器：640B（0.0110%）
：640 B（100%）
雷迪克斯·图恩：375亿欧元（0.00643%）
：375 B（100%）
网页：251b（0.00430%）
：251 B（100%）
巴别塔核心：247B（0.00424%）
：247 B（100%）
全球：243亿（0.00417%）
：243 B（100%）
同构回迁：233B（0.00400%）
：233 B（100%）
严格uri编码：182 B（0.00312%）
：182 B（100%）
反应dom:63 B（0.00108%）
：63 B（100%）
：502.91 KB（8.83%）

我对您软件包中的图像了解不多。但是javascript（或任何其他文本）文件可以缩小和压缩。缩小应该通过webpack完成，gzip是web服务器的功能

我也不建议在javascript

bundle.js中包含任何图像，这不是一个好的做法

所以基本的解决方案是：

缩小js文件
为js文件启用gzip功能
从js/css中删除图像
我不是已经在这里进行缩小了吗：
newwebpack.optimize.UglifyJsPlugin（{minimize:true}）
@Michael-R它能工作吗？你能看到你的最后一个包裹是否缩小了吗？@Michael-R关于图像呢？你真的想在你的
css
中包含它们吗？我并不特别需要，但图像文件夹只有132kb，实际上只是中小型的iconsI给了你这个建议，但我仍在寻找一个更有效的解决方案，在我解决这个问题之前不会发布答案。尽管如此，还是要感谢你的意见。