使用webpack構建時，如何使你的專案打包速度提升68% ？

tangchaoren發表於2018-08-28
Web

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

使用webpack構建時，如何使你的專案打包速度提升68% ？

  • 使用之後的打包時間 2.15s

使用webpack構建時，如何使你的專案打包速度提升68% ？

結論： 通過對比可以看出，使用happypack plugin後，速度提升了 68%。大大的提高了我們的構建效能。

相關文章