使用webpack构建时，如何使你的项目打包速度提升68% ？

happypack plugin 使用简介

前言：当我们对项目进行优化时，首先想到的会是什么呢？有时候找遍了搜索引擎，但优化效果却不尽人意，随着项目越来越大，有些优化配置已经不能满足我们的要求，今天给大家介绍一个plugin，那就是happypack。众所周知webpack运行在node上进行打包时执行任务都是使用单线程的，就是一个任务完成后再去执行下一个任务。这样对于一些急性子来说，势必不能容忍。那么，happypack就是解决这类问题的，它能够把任务分配给多个子进程，子进程运行完以后再把结果返回给主进程。具体来看：

第一次写掘金，废话不多说，直接上配置代码：

const HappyPack = require('happypack');
 module: {
        rules: [
        {
            test: /\.vue$/,
            loader: 'happypack/loader?id=vue',
            include: resolve('src')
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                use: 'happypack/loader?id=css'
            }),
            include: resolve('src')
        },
        {
            test: /\.js$/,
            loader: 'happypack/loader?id=babel'
            include: [resolve('src'), resolve('node_modules/webpack-dev-server/client')]
        }
        ]
    },
    plugins: [
        new HappyPack({
            id: 'babel',
            loaders: [{
                loader: 'babel-loader'
            }]
        }),
        new HappyPack({
            id: 'css',
            loaders: [{
                loader: 'css-loader'
            }]
        }),
        new HappyPack({
            id: 'vue',
            loaders: [{
                loader: 'vue-loader'
            }]
        })
    ],
复制代码

以上便是在生产环境下关于happypack的配置。主要的区别在于原来rules里面的每一个配置项中的loader都换成了'happypack/loader?id=xxx'，而在plugin中我们需要去实例化HappyPack。这样，我们项目中便应用了happypack。

效果对比

使用happypack之前的打包速度 5.95s

使用之后的打包时间 2.15s

结论：通过对比可以看出，使用happypack plugin后，速度提升了 68%。大大的提高了我们的构建性能。