如何压缩我的react bundle.js太大了7.30 MB

时间:2017-05-12 05:59:46

标签: reactjs express

我想压缩,我已经看到很多示例和实现,但它不压缩。我应该怎么做这个代码。

我使用过这个例子https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a但不压缩。



import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import autoprefixer from 'autoprefixer';
import CompressionPlugin from 'compression-webpack-plugin';

export default {
  // devtool: build ? undefined : 'inline-source-map',
  devtool: 'eval',
  target: 'web',
  entry : [path.join(__dirname, '/client/index.js'), 'webpack-hot-middleware/client'],
  output : {
    path: '/',
    publicPath:'/',
    filename: '/bundle.js',
    pathInfo : true
  },
  plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      }),
	    new webpack.DefinePlugin({
	      'process.env':{
	        'NODE_ENV': JSON.stringify('production')
	      }
	    }),
      new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false },
        comments: false,
        minimize: false
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.AggressiveMergingPlugin(),//Merge chunks 
      new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
      }),
      new ExtractTextPlugin("style.css"),
  ],
  module: {
    loaders : [
      {test: /\.json$/, loader: 'json'},
      {test: /\.js$/, exclude: /node_modules/, loader: ['react-hot','babel'] },      
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      {test: /\.css$/, loader: "style-loader!css-loader"},
      {test: /\.es6$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015'] }}
    ]
  },
  externals: {
    fs: '{}'
  }
}




0 个答案:

没有答案