彻底解决Webpack打包慢的问题

==============

问题如果就这么简单地解决了的话，那我就没必要写这篇文章了，下面我们加一个 react 的动画库 react-addons-css-transition-group 来试一试：

import React from ‘react’;

import ReactAddonsCssTransitionGroup from ‘react-addons-css-transition-group’;

console.log(React);

对，你没有看错，我也没有截错图，新加了一个很小很小的动画库之后，性能又爆炸了。从模块数来看，一定是 Webpack 又把 react 重新打包了一遍。

我们来看一下为什么一个很小很小的动画库会导致 Webpack 又傻傻地把 react 重新打包了一遍。找到 react-addons-css-transition-group 这个模块，然后看看它是怎么写的：

// react-addons-css-transition-group模块

// 入口文件 index.js

module.exports = require(‘react/lib/ReactCSSTransitionGroup’);

这个动画模块就只有一行代码，唯一的作用就是指向 react 下面的一个子模块，我们再来看看这个子模块是怎么写的：

// react模块

// react/lib/ReactCSSTransitionGroup.js

var React = require(‘./React’);

var ReactTransitionGroup = require(‘./ReactTransitionGroup’);

var ReactCSSTransitionGroupChild = require(‘./ReactCSSTransitionGroupChild’);

//…剩余代码忽略

这个子模块又反回去依赖了 react 整个库的入口，这就是拖累 Webpack 的罪魁祸首。

总而言之，问题是这样产生的：

1. Webpack 发现我们依赖了 react-addons-css-transition-group

2. Webpack 去打包 react-addons-css-transition-group 的时候发现它依赖了 react 模块下的一个叫 ReactTransitionGroup.js 的文件，于是 Webpack 去