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

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

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

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

構(gòu)建

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

thread-loader

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

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

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)
        ]
      }
    ]
  }

每個(gè) worker 都是一個(gè)多帶帶的有 600ms 限制的 node.js 進(jìn)程。同時(shí)跨進(jìn)程的數(shù)據(jù)交換也會(huì)被限制。請(qǐng)?jiān)诟唛_銷的loader中使用，否則效果不佳

更多配置請(qǐng)查看： 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é)

從實(shí)際使用的情況來看，thread-loader 和 happypack 對(duì)于小型項(xiàng)目來說打包速度幾乎沒有影響，是因?yàn)樗旧淼念~外開銷，例如I/O，建議只在大型項(xiàng)目中使用，可以先測(cè)試再投入生產(chǎn)環(huán)境。

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

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

推薦使用 terser-webpack-plugin

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

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

用法和 example

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

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

更多用法請(qǐng)查看上面鏈接。

總結(jié)

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

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

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

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

shmily

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

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

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

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

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章