Question

我很难设置正确的Webpack配置。我的开发bundle.js达到14.6mb，而我的产量是23mb。我的源的大小只有455kb（js，css，images）......所以这似乎已经过时了，更不用说生产比dev bundle更大了。还有一些图像似乎变形/伸展。我无法真正理解发生了什么（是的，我花了很多时间在谷歌上）或者如何正确设置我的Webpack配置以进行适当的优化。

修改1 这似乎是Uglify的一个问题。当我拿出它时，构建速度为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;

Webpack-Bundle-Size-Analyzer：

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%)

Answer 1

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

我也不建议在javascript bundle.js中加入任何图片，这不是一个好习惯。

所以基本上解决方案是：

缩小js文件
为js文件启用gzip功能
从js / css中删除图像

Webpack - 误解和大捆绑

1 个答案: