两种快速方法：减少React应用在生产环境打包文件的大小

译者：小猿大圣

原文链接

如果你正在使用Webpack构建一个 React + Redux应用。 你可能已经注意到了，一个简单的应用最终的bundle.js (开发版) 可能有1MB到2MB!

例如: 下面是一张来自一个简单的react-redux博客项目react-redux-blog (live)的Webpack stats analyzer的分析图. 结果表明，总的大小是1.5MB，并且超过90% (1.2MB)恰恰是node_modules的库!

太吓人了? ，但是Webpack和Node.js有你所需的，能减少打包后js文件大小的所有工具。

我能通过做以下两件简单的事情，把文件的大小从1.5MB减少到仅仅90KB :

1. 增加以下 Webpack 插件 (源码)

plugins: [
    new webpack.DefinePlugin({ // <-- 减少 React 大小的关键
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.DedupePlugin(), //删除类似的重复代码
    new webpack.optimize.UglifyJsPlugin(), //最小化一切
    new webpack.optimize.AggressiveMergingPlugin()//合并块
  ],

这些插件把文件大小从1.5MB 减少到了 379KB!

文件大小 开发 v/s 生产

2. 在生产环境服务端 gzip 压缩文件

你能通过gzip压缩显著的减少bundle.js文件的大小。 有两种方法这样做。1. 动态 gzip (不是首选) 2. 构建时gzip压缩 (首选)

2.1 动态 gzip (不是首选)

你只需要在你的应用里添加 Express “压缩插件” 。这个插件能动态的压缩 bundle.js 文件并启动服务。 但是，这样做会增加CPU的压力，影响性能。(感谢 rajeshsegu 指出这一点)。

//只需要添加动态 gzip 压缩 (不是首选)

npm install compression --save //安装

var compression = require(‘compression’); //引入到 express 应用

app.use(compression());//添加这个作为第一个中间件

2.2 构建时 gzip (首选)

用Webpack的压缩插件生成bundle.js.gz 代替生成bundle.js。 之后添加一个中间件返回被 gzip 压缩的JS文件。

//1.安装Webpack压缩插件
npm install compression-webpack-plugin --save-dev

 //2. 在webpack.config.prod.js中引入插件
var CompressionPlugin = require('compression-webpack-plugin');

//3. 添加到插件数组中
plugins: [
    new webpack.DefinePlugin({ 
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
 new CompressionPlugin({   <-- 加上这
      asset: ""[path].gz[query]"",
      algorithm: ""gzip"",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]

//4. 最后, 在 Express 中添加中间件返回 .js.gz 。所以你仍然可以从HTML加载bundle.js但会收到bundle.js.gz

app.get('*.js', function (req, res, next) {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  next();
});

这把我的应用文件大小从 379KB 缩减到了仅仅 90KB !

注: 还有其他方法可以进一步改进。 将来，当 Webpack 2发布的时候，我计划写另一篇更长的文章。

就是这样!