刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式，都没多大效果。所以，如果你打包后的文件非常大的话，先检查下是不是包含了这些插件。
提取第三方库
像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置
{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}
这样打包之后就会多出一个 vendor.js 文件，之后在引入我们自己的代码之前，都要先引入这个文件。比如在 index.html 中
确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍。然而，有几个解决方案，最有效的，是使用weboack的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的。这样子，打包时间迅速降到200ms
以内。
再优化下去的话，我们要知道webpack打包的过程中做了啥，首先是解析依赖啦，然后就是各种各样的loader。从解析依赖的角度入手，我们可以bower install一些打包好的文件，然后通过设置别名让依赖指向这个文件，这样就减去了第三方库的依赖解析时间。
然后各种各样的loader也是很耗时的，一种办法是在loader里面配include，让loader只针对特殊资源。另一种办法是让你的第三方库noparse，具体怎么设置你查文档吧。
一.介绍：react：
他是facebook创建的javascriptUi框架，react与当时流行的jquery等不同，最大的区别就是虚拟DOM节点，加快渲染速度，并且创造了新的写法jsx，也就是允许在js中编写html；
vue.js:
解决问题跟react一致，但是他提供了另外一种方案，vue.js的模板系统就是普通的html，css，js页面，淡化了jsx写法，这样更直观，对于之前的项目重构也更容易；
相同点：
1.都是用于创建ui的js库；
2.都比较轻便；
3.都是组件化思想，组件化开发；、
4.都是虚拟dom，提高渲染速度；
5.都有独立的路由系统，以及独立的状态管理库；
6.都可以放进一个独立的html文件，或者依托于weboack模块；
优势：
vue.js：
1.模板和渲染函数的弹性选择；
2.语法简洁，项目创建简洁；
3.渲染速度快，体积更小；
react:
1.更适合超大型项目，更好的可测试性；
2.同时适用于wen端和原生的app；
3.更大的生态圈，维护的群体更大；
