一般node.js是单线程执行编译，而happypack则是启动node的多线程进行构建，大大提高了构建速度。使用方法也比较简单。以我项目为例,在插件中new一个新的happypack进程出来，然后再使用使用loader的地方替换成对应的id
var HappyPack = require('happypack'); ... ... modules:{ rules : [ ... { test: /\.js$/, loader:[ 'happypack/loader?id=happybabel'], include: [resolve('src')] }, ... ] }, ... ... plugin:[ //happypack对对 url-loader,vue-loader 和 file-loader 支持度有限，会有报错，有坑。。。 new HappyPack({ id: 'happybabel', loaders: ['babel-loader'], threads: 4,//HappyPack 使用多少子进程来进行编译 }), new HappyPack({ id: 'scss', threads: 4, loaders: [ 'style-loader', 'css-loader', 'sass-loader', ], }) ]
这时候再去执行编译webpack的代码，打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大，不知道是不是因为本身js比重占据太大的缘故)。
3.善用alias
3.配合resolve，善用alias
本来是没有第三点的，只不过在搜索网上webpack优化相关文章的时候，看到用人提到把引入文件改成库提供的文件(原理我理解其实就是1.先通过resolve指定文件寻找位置，减小搜索范围；2.直接根据alias找到库提供的文件位置)。
vue-cli配置文件中提示也有提到这一点，就是下面这段代码
resolve: { //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名 extensions: ['.js', '.vue', '.json'], //模块别名定义，方便后续直接引用别名，无须多写长长的地址 alias: { 'vue$': 'vue/dist/vue.esm.js',//就是这行代码，提供你直接引用文件 '@': resolve('src'), } },
然后我将其他所有地方关于vue的引用都替换成了vue$之后，比如
// import 'vue'; import 'vue/dist/vue.esm.js';
时间竟然到了12s，也是把我吓了一跳。。。
然后我就把jquery，axios，vuex等等全部给替换掉了。。。大概优化到了9s左右，美滋滋，O(∩_∩)O~~
4.webpack3升级
本来是没第四点，刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点，比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件
// 2017-08-13配合最新升级的webpack3提供的新功能，可以使压缩的代码更小，运行更快 ... plugin : [ new webpack.optimize.ModuleConcatenationPlugin(), ]
不过在添加这行代码之后，构建时间并没有太大变化，不过运行效率没试过，不知道新的效果怎么样
好了基本上感觉就是以上这些效果对项目的优化最大，虽然没有到网上说的那种只要3~4秒时间那么变态，不过感觉基本8,9秒的时间也可以了。