即刻起，加速您的前端構建

13651657101 發布于2019-08-26 13:37 / 3220人閱讀

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

本文由云+社區發表

作者：志航

構建

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

thread-loader

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

把這個 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 進程。同時跨進程的數據交換也會被限制。請在高開銷的loader中使用，否則效果不佳

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

happypack

happypack，通過多進程模型，來加速代碼構建。從 github 的 starts 數量來看，happypack 使用的人數比較多，比較受歡迎。

原理

相關的技術原理這里不再累贅，可以查看淘寶FED的相關文章 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
      })
  ]

構建方法總結

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

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

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

推薦使用 terser-webpack-plugin

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

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

用法和 example

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

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

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

總結

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

此文已由騰訊云+社區在各渠道發布

獲取更多新鮮技術干貨，可以關注我們騰訊云技術社區-云加社區官方號及知乎機構號

GPU云服務器云服務器前端構建即刻學堂即刻小程序即刻開店小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109195.html

即刻起，加速您的前端構建

摘要：會將您的放置在一個池里面運行，以達到多線程構建。請在高開銷的中使用，否則效果不佳更多配置請查看，通過多進程模型，來加速代碼構建。壓縮是發布前處理最耗時間的一個步驟，如果是你是在中，只要幾行代碼，即可加速你的構建發布速度。本文由云+社區發表作者：志航構建影響前端發布速度的有兩個方面，一個是構建，一個就是壓縮，把這兩個東西優化起來，可以減少很多發布的時間。 thread-loade...

shmily 2019-08-02 14:31 評論0 收藏0
UCloud怪獸主機再升級新快杰3+1讓超強算力即刻可得

摘要：快杰云主機發布款全新機型在去年大會上，云主機團隊推出了萬網絡性能萬存儲性能的快杰云主機。但同時價格則與上一代快杰持平，升頻不加價。其中在的跑分中，快杰與上代快杰相比算力提升。除了上述三款性能主機外，上還發布了采用處理器的快杰型預覽版。10月23日以構建·創見|為主題的UCloud用戶大會暨Think in Cloud 2020（以下簡稱TIC）在上海召開。在本次大會上，UCloud推出了歷經...

Tecode 2022-06-28 18:59 評論0 收藏0
云適配開放平臺內測“挑刺有獎” ：贏土豪金

2013年，你是甲方，我是乙方，我為你云適配。 2014年，我的地盤你做主，云適配攻城獅們的工作陣地將全權授權給你，你可以自由的 DIY 您的網站，No more time，No Money，只要1天，只要1個人，只要2步，云適配開放平臺一站搞定，您的跨屏網站即刻誕生了！！！ BUT，BUT，BUT，在你開始完全做主前，我們想邀請您來參與云適配開放平臺的內測，只要您具備最基礎的前端開發技術，擁有一...

vvpale 2019-08-28 17:54 評論0 收藏0
云適配開放平臺內測“挑刺有獎” ：贏土豪金

2013年，你是甲方，我是乙方，我為你云適配。 2014年，我的地盤你做主，云適配攻城獅們的工作陣地將全權授權給你，你可以自由的 DIY 您的網站，No more time，No Money，只要1天，只要1個人，只要2步，云適配開放平臺一站搞定，您的跨屏網站即刻誕生了！！！ BUT，BUT，BUT，在你開始完全做主前，我們想邀請您來參與云適配開放平臺的內測，只要您具備最基礎的前端開發技術，擁有一...

TesterHome 2019-08-14 11:43 評論0 收藏0