即刻起，加速您的前端構(gòu)建

shmily 發(fā)布于2019-08-02 14:31 / 2216人閱讀

摘要：會將您的放置在一個池里面運行，以達(dá)到多線程構(gòu)建。請在高開銷的中使用，否則效果不佳更多配置請查看，通過多進(jìn)程模型，來加速代碼構(gòu)建。壓縮是發(fā)布前處理最耗時間的一個步驟，如果是你是在中，只要幾行代碼，即可加速你的構(gòu)建發(fā)布速度。

本文由云+社區(qū)發(fā)表作者：志航

構(gòu)建

影響前端發(fā)布速度的有兩個方面，一個是構(gòu)建，一個就是壓縮，把這兩個東西優(yōu)化起來，可以減少很多發(fā)布的時間。

thread-loader

thread-loader 會將您的 loader 放置在一個 worker 池里面運行，以達(dá)到多線程構(gòu)建。

把這個 loader 放置在其他 loader 之前（如下圖 example 的位置），放置在這個 loader 之后的 loader 就會在一個多帶帶的 worker 池(worker pool)中運行。

Install

$ npm install --save-dev thread-loader

用法和 exmaple

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        include: path.resolve("src"),
        use: [
          "thread-loader",
          // 你的高開銷的loader放置在此 (e.g babel-loader)
        ]
      }
    ]
  }

每個 worker 都是一個多帶帶的有 600ms 限制的 node.js 進(jìn)程。同時跨進(jìn)程的數(shù)據(jù)交換也會被限制。請在高開銷的loader中使用，否則效果不佳

更多配置請查看： https://github.com/webpack-co...

happypack

happypack，通過多進(jìn)程模型，來加速代碼構(gòu)建。從 github 的 starts 數(shù)量來看，happypack 使用的人數(shù)比較多，比較受歡迎。

原理

相關(guān)的技術(shù)原理這里不再累贅，可以查看淘寶FED的相關(guān)文章 happypack 原理解析

用法和example

var HappyPack = require("happypack");
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

// ... 省略其余配置
module: {
  loaders: [
      {
        test: /.less$/,
        loader: ExtractTextPlugin.extract(
            "style",
            path.resolve(__dirname, "./node_modules", "happypack/loader") + "?id=less"
        )
      }
    ]
  },
  plugins: [
      new HappyPack({
        id: "less",
        loaders: ["css!less"],
        threadPool: happyThreadPool,
        cache: true,
        verbose: true
      })
  ]

構(gòu)建方法總結(jié)

從實際使用的情況來看，thread-loader 和 happypack 對于小型項目來說打包速度幾乎沒有影響，是因為它本身的額外開銷，例如I/O，建議只在大型項目中使用，可以先測試再投入生產(chǎn)環(huán)境。

壓縮 不推薦使用 webpack-parallel-uglify-plugin

項目基本處于沒人維護(hù)的階段，issue 沒人處理，pr沒人合并。

推薦使用 terser-webpack-plugin

terser-webpack-plugin 是一個使用 terser 壓縮js的webpack 插件。

壓縮是發(fā)布前處理最耗時間的一個步驟，如果是你是在webpack 4 中，只要幾行代碼，即可加速你的構(gòu)建發(fā)布速度。

用法和 example

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin(
      parallel: true   // 多線程
    )],
  },
};

更多用法請查看上面鏈接。

總結(jié)

隨著 webpack 4 的優(yōu)化，構(gòu)建速度其實得到了極大的提升，也收到了parcel 等零配置Web應(yīng)用打包工具的啟發(fā)，其實 webpack 的配置日趨簡潔，何不嘗試配置一下呢？

此文已由騰訊云+社區(qū)在各渠道發(fā)布

獲取更多新鮮技術(shù)干貨，可以關(guān)注我們騰訊云技術(shù)社區(qū)-云加社區(qū)官方號及知乎機構(gòu)號

云服務(wù)器 GPU云服務(wù)器前端構(gòu)建即刻學(xué)堂即刻小程序即刻開店小程序

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53859.html

發(fā)表評論

登陸后可評論

0條評論

shmily

男|高級講師

我要關(guān)注我要私信

TA的文章

dns主機別名怎么用-私人dns主機名設(shè)置？

閱讀 4588·2021-09-22 14:57
使用es6實現(xiàn)iview的選項卡切換

閱讀 564·2019-08-30 15:56
掌握緩存，不再讓你藍(lán)瘦香菇

閱讀 2668·2019-08-30 15:53
Skeleton Screen -- 骨架屏

閱讀 2241·2019-08-29 14:15
字符串截取的幾種辦法（php，js，css三種）

閱讀 1689·2019-08-28 17:54
網(wǎng)頁加密16進(jìn)制

閱讀 561·2019-08-26 13:37
Cookie就擺在那，為什么死活吃不到？

閱讀 3479·2019-08-26 10:57
熱播劇因“問題地圖”踩雷，創(chuàng)作平臺如何規(guī)避？

閱讀 1047·2019-08-26 10:32

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

即刻起，加速您的前端構(gòu)建

相關(guān)文章