Question

好的，我在这里阅读了许多关于为生产版本优化bundle.js的帖子（like this one），但他们根本没有改变我的bundle.js文件，所以我一定做错了。我正在使用命令构建：

webpack -p --config webpack.production.config.js

和webpack.production.config.js看起来像这样：

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

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
      }
    ]
  },
  alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
};

我不知所措。我有17个node_modules，包括react和webpack等所有基础知识。我的bundle.js文件是15.6MB ....绝对庞大且不可接受。从我正在阅读的内容看起来像-p和插件

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

应自动使用.min.js版本的所有内容。那是对的吗？我是否必须做任何事情来强制我的应用程序使用它？

任何优化都会有很大帮助！应用程序实际上并不是那么大，并且页面的初始加载时间很长。

谢谢！

Answer 1

对于生产版本，请尝试将SELECT EmpAddress = REPLACE(E.empAddress, 'ADR ', '') FROM Employee E更改为devtool: 'inline-source-map'

来自https://webpack.github.io/docs/configuration.html的网络包配置说：

devtool: 'source-map' - 将SourceMap作为DataUrl添加到JavaScript中文件。

此外，对于生产版本，您可以删除＆＃39; react-hot＆＃39;在装载机部分。

例如，在我的一个项目中存在这些差异，开发包为9MB，但生产包为600KB。希望您能看到类似的改进。

Answer 2

我强烈建议您阅读this教程，阅读本文后答案非常明显。

简单地说，您可以使用名为uglify的插件，它可以显着减少捆绑包大小。另外，React使用'NODE_ENV': JSON.stringify('production')，与webpack无关

与webpack的反应给了我一个庞大的bundle.js文件

2 个答案: