webpack-优化

在webpack打包的时候，打包的速度和大小会随着项目的增大而变化，为了更优化项目，可以通过webpack来进行优化。

1、devtool ： 调试

　　不同的调试方式的大小和速度不同，可以开发和生产用不同的调试方式

2、UglifyJSPlugin：

　　js压缩插件，可以压缩打包的js大小

3、babel-loader开启缓存：

　　babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率,

4、提取公共代码： 

　　使用CommonsChunkPlugin提取公共的模块，可以减少文件体积，也有助于浏览器层的文件缓存，最后生成一个公用的组件common.bundle.js

5、使用HappyPack来加速构建：

　　HappyPack会采用多进程去打包构建

6、优化构建时的搜索路径：

　　在webpack打包时，会有各种各样的路径要去查询搜索，我们可以加上一些配置，避免多余查找的文件，让它搜索地更快。

　　设置忽略模块exclude: /(node_modules|bower_components)/ 不用变异node-module模块

7、使用异步的模块加载

　　可以减小模块，使用require.ensure来设置哪些模块需要异步加载，webpack会将它打包到一个独立的chunk中，在某个时刻（比如用户点击了查看）才异步地加载这个模块来执行

8、以模块化来引入

　　修改代码的引入方式，有些模块是可以以模块化来引入的，就是说可以只引入其中的一部分

　// 原来的引入方式
 import {debounce} from 'lodash';

 //按模块化的引入方式
 import debounce from 'lodash/debounce';