Webpack + React.js 优化

背景

最近我在 Code Review 的时候发现生产构建后的文件体积在 400kb。（这个是不能忍的）

目标

比如，我先给自己定一个小目标，把他压缩到 400kb * 2/3，目前我们团队的构建工具是 Webpack 全家桶，所以我着手从 Webpack 来开刀。

思路

Webpack 开发，工程师可以按 CommonJS 或 ES6 Module 的规范写前端 JS 代码，我们团队使用的是后者。

使模块源代码的好处就是看起来跟后端代码一样简洁：

Java import 关键字导入包

ES6 Module import

但是，很快你就会发现构建后的文件会越来越大（尤其基于 React.js 进行开发的应用，如果是单页面程序？那么就更大了），为了解决现状，可以从以下几个切入点去搞：

按需加载「 Code Split 」
提取公共代码「 CommonsChunkPlugin 」
第三方库分开打包「 DllPlugin 」
代码压缩「 UglifyJSPlugin 」

按需加载

翻译一下官方文档对于 Code Splitting 的介绍：

For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.

对于大型的 web 应用而言，把所有的代码放到一个文件的做法效率很差，特别是在加载了一些只有在特定环境下才会使用到的阻塞的代码的时候。Webpack 有个功能会把你的代码分离成 Chunk，后者可以按需加载。这个功能就是 Code Spliiting

比如 Code Split 可以将一个模块分出来了两个子的 chunk，即 a.bundle 和 b.bundle，从而减小了主 chunk bundle.js 的文件大小，减轻程序初始化的网络等待。（比如用户第一次加载应用的时候，Webview 没有缓存 CDN 的时候，这个时候就能体现它的价值）

require.ensure API Example：


require.ensure(["module-a", "module-b"], function() {
  var a = require("module-a")
  // ...
})

代码压缩

Copyright 信息

JavaScript 有大量的优秀第三方开源库，我们在敏捷开发的时候往往就直接拿过来用，但里面含有大量的第三方开源库的 Copyright 信息,出于构建后代码体积的大小，我考虑去掉。

new webpack.optimize.UglifyJsPlugin({
  output: {
    comments: false,
  },
  compress: {
    warnings: false
  }
})

hoosin / hoosin.github.io