webpack4.0各個擊破（4）—— Javascript & splitChunk

来源:https://www.cnblogs.com/dashnowords/archive/2018/08/29/9545482.html
-Advertisement-
Play Games

作為前端最火的構建工具，是前端自動化工具鏈 最重要的部分 ，使用門檻較高。本系列是筆者自己的學習記錄，比較基礎，希望通過 問題 + 解決方式 的模式，以前端構建中遇到的具體需求為出發點，學習 工具中相應的處理辦法。（本篇中的參數配置及使用方式均基於 ） 本篇摘要： 本篇主要介紹基於 的`splitC ...


目錄

webpack作為前端最火的構建工具，是前端自動化工具鏈最重要的部分，使用門檻較高。本系列是筆者自己的學習記錄，比較基礎，希望通過問題 + 解決方式的模式，以前端構建中遇到的具體需求為出發點，學習webpack工具中相應的處理辦法。（本篇中的參數配置及使用方式均基於webpack4.0版本）

本篇摘要：

本篇主要介紹基於webpack4.0的splitChunks分包技術。

一. Js模塊化開發

javascript之所以需要打包合併，是因為模塊化開發的存在。開發階段我們需要將js文件分開寫在很多零碎的文件中，方便調試和修改，但如果就這樣上線，那首頁的http請求數量將直接爆炸。同一個項目，別人2-3個請求就拿到了需要的文件，而你的可能需要20-30個，結果就不用多說了。

但是合併腳本可不是“把所有的碎片文件都拷貝到一個js文件里”這樣就能解決的，不僅要解決命名空間衝突的問題，還需要相容不同的模塊化方案，更別提根據模塊之間複雜的依賴關係來手動確定模塊的載入順序了，所以利用自動化工具來將開發階段的js腳本碎片進行合併和優化是非常有必要的。

二. Js文件的一般打包需求

  • 代碼編譯（TS或ES6代碼的編譯）
  • 腳本合併
  • 公共模塊識別
  • 代碼分割
  • 代碼壓縮混淆

三. 使用webpack處理js文件

3.1 使用babel轉換ES6+語法

babel是ES6語法的轉換工具，對babel不瞭解的讀者可以先閱讀《大前端的自動化工廠（3）——Babel》一文進行瞭解，babel與webpack結合使用的方法也在其中做了介紹，此處僅提供基本配置：

webpack.config.js:

...  
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
             loader: 'babel-loader'
          }
        ]
      }
    ]
  },
 ...

.babelrc:

{
    "presets":[
        ["env",{
            "targets":{
                "browsers":"last 2 versions"
            }
        }
        ]],
    "plugins": [
         "babel-plugin-transform-runtime" 
    ]
}

3.2 腳本合併

使用webpack對腳本進行合併是非常方便的，畢竟模塊管理和文件合併這兩個功能是webpack最初設計的主要用途，直到涉及到分包和懶載入的話題時才會變得複雜。webpack使用起來很方便，是因為實現了對各種不同模塊規範的相容處理，對前端開發者來說，理解這種相容性實現的方式比學習如何配置webpack更為重要。webpack預設支持的是CommonJs規範，但同時為了擴展其使用場景，webpack在後續的版本迭代中也加入了對ES harmony等其他規範定義模塊的相容處理，具體的處理方式將在下一章《webpack4.0各個擊破（5）—— Module篇》詳細分析。

3.3 公共模塊識別

webpack的輸出的文件中可以看到如下的部分：

/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }

上面的__webpack_require__( )方法就是webpack的模塊載入器，很容易看出其中對於已載入的模塊是有統一的installedModules對象來管理的，這樣就避免了模塊重覆載入的問題。而公共模塊一般也需要從bundle.js文件中提取出來，這涉及到下一節的“代碼分割”的內容。

3.4 代碼分割

1. 為什麼要進行代碼分割？

代碼分割最基本的任務是分離出第三方依賴庫，因為第三方庫的內容可能很久都不會變動，所以用來標記變化的摘要哈希contentHash也很久不變，這也就意味著我們可以利用本地緩存來避免沒有必要的重覆打包，並利用瀏覽器緩存避免冗餘的客戶端載入。另外當項目發佈新版本時，如果第三方依賴的contentHash沒有變化，就可以使用客戶端原來的緩存文件（通用的做法一般是給靜態資源請求設置一個很大的max-age），提升訪問速度。另外一些場景中，代碼分割也可以提供對腳本在整個載入周期內的載入時機的控制能力。

2. 代碼分割的使用場景

舉個很常見的例子，比如你在做一個數據可視化類型的網站，引用到了百度的Echarts作為第三方庫來渲染圖表，如果你將自己的代碼和Echarts打包在一起生成一個main.bundle.js文件，這樣的結果就是在一個網速欠佳的環境下打開你的網站時，用戶可能需要面對很長時間的白屏，你很快就會想到將Echarts從主文件中剝離出來，讓體積較小的主文件先在界面上渲染出一些動畫或是提示信息，然後再去載入Echarts，而分離出的Echarts也可以從速度更快的CDN節點獲取，如果載入某個體積龐大的庫，你也可以選擇使用懶載入的方案，將腳本的下載時機延遲到用戶真正使用對應的功能之前。這就是一種人工的代碼分割。

從上面的例子整個的生命周期來看，我們將原本一次就可以載入完的腳本拆分為了兩次，這無疑會加重服務端的性能開銷，畢竟建立TCP連接是一種開銷很大的操作，但這樣做卻可以換來對渲染節奏的控制和用戶體驗的提升，非同步模塊和懶載入模塊從巨集觀上來講實際上都屬於代碼分割的範疇。code splitting最極端的狀況其實就是拆分成打包前的原貌，也就是源碼直接上線。

3. 代碼分割的本質

代碼分割的本質，就是在“源碼直接上線”和“打包為唯一的腳本main.bundle.js”這兩種極端方案之間尋找一種更符合實際場景的中間狀態，用可接受的伺服器性能壓力增加來換取更好的用戶體驗。

4. 配置代碼分割

code-splitting技術的配置和使用方法將在下一小節詳細描述。

5. 更細緻的代碼分割

感興趣的讀者可以參考來自google開發者社區的文章《Reduce JavaScript Payloads with Code Splitting》自行研究。

3.5 代碼混淆壓縮

webpack4中已經內置了UglifyJs插件，當打包模式參數mode設置為production時就會自動開啟，當然這不是唯一的選擇，babel的插件中也能提供代碼壓縮的處理，具體的效果和原理筆者尚未深究，感興趣的讀者可以自行研究。

四. 細說splitChunks技術

4.1 參數說明

webpack4廢棄了CommonsChunkPlugin插件，使用optimization.splitChunks和optimization.runtimeChunk來代替，原因可以參考《webpack4：連奏中的進化》一文。關於runtimeChunk參數，有的文章說是提取出入口chunk中的runtime部分，形成一個單獨的文件，由於這部分不常變化，可以利用緩存。google開發者社區的博文是這樣描述的：

 The runtimeChunk option is also specified to move webpack's runtime into the vendors chunk to avoid duplication of it in our app code.

splitChunks中預設的代碼自動分割要求是下麵這樣的：

  • node_modules中的模塊或其他被重覆引用的模塊

    就是說如果引用的模塊來自node_modules,那麼只要它被引用，那麼滿足其他條件時就可以進行自動分割。否則該模塊需要被重覆引用才繼續判斷其他條件。（對應的就是下文配置選項中的minChunks為1或2的場景）

  • 分離前模塊最小體積下限（預設30k，可修改）

    30k是官方給出的預設數值，它是可以修改的，上一節中已經講過，每一次分包對應的都是服務端的性能開銷的增加，所以必須要考慮分包的性價比。

  • 對於非同步模塊，生成的公共模塊文件不能超出5個（可修改）

    觸發了懶載入模塊的下載時，併發請求不能超過5個，對於稍微瞭解過服務端技術的開發者來說，【高併發】和【壓力測試】這樣的關鍵詞應該不會陌生。

  • 對於入口模塊，抽離出的公共模塊文件不能超出3個（可修改）

    也就是說一個入口文件的最大並行請求預設不得超過3個，原因同上。

4.2 參數配置

splitChunks的在webpack4.0以上版本中的用法是下麵這樣的：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',//預設只作用於非同步模塊，為`all`時對所有模塊生效,`initial`對同步模塊有效
      minSize: 30000,//合併前模塊文件的體積
      minChunks: 1,//最少被引用次數
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',//自動命名連接符
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          minChunks:1,//敲黑板
          priority: -10//優先順序更高
        },
        default: {
          test: /[\\/]src[\\/]js[\\/]/
          minChunks: 2,//一般為非第三方公共模塊
          priority: -20,
          reuseExistingChunk: true
        }
      },
      runtimeChunk:{
          name:'manifest'
      }
    }
  }

4.3 代碼分割實例

註：實例中使用的demo及配置文件已放在附件中。

  • 單頁面應用

    單頁面應用只有一個入口文件，splitChunks的主要作用是將引用的第三方庫拆分出來。從下麵的分包結果就可以看出，node_modules中的第三方引用被分離了出來，放在了vendors-main.[hash].js中。

  • 多頁面應用

    多頁面應用的情形稍顯複雜，以《webpack4：連奏中的進化》一文中的例子進行代碼分割處理，源碼的依賴關係為：

    entryA.js: vue vuex component10k
entryB.js: vue axios component10k
entryC.js: vue vuex axios component10k

    經過代碼分割後得到的包如下圖所示：

​ splitChunks提供了更精確的分割策略，但是似乎無法直接通過html-webpack-plugin配置參數來動態解決分割後代碼的註入問題，因為分包名稱是不確定的。這個場景在使用chunks:'async'預設配置時是不存在的，因為非同步模塊的引用代碼是不需要以<script>標簽的形式註入html文件的。

當chunks配置項設置為all或initial時，就會有問題，例如上面示例中，通過在html-webpack-plugin中配置excludeChunks可以去除page和about這兩個chunk，但是卻無法提前排除vendors-about-page這個chunk，因為打包前無法知道是否會生成這樣一個chunk。這個場景筆者並沒有找到現成的解決方案，對此場景有需求的讀者也許可以通過使用html-webpack-plugin的事件擴展來處理此類場景，也可以使用折中方案，就是第一次打包後記錄下新生成的chunk名稱，按需填寫至html-webpack-plugin的chunks配置項里。

### 4.4 結果分析

通過Bundle Buddy分析工具或webpack-bundle-analyser插件就可以看到分包前後對於公共代碼的抽取帶來的影響（圖片來自參考文獻的博文）：

五. 參考及附件說明

【1】附加中文件說明：

  • webpack.spa.config.js——單頁面應用代碼分割配置實例
  • main.js——單頁面應用入口文件
  • webpack.multi.config.js——多頁面應用代碼分割配置實例
  • entryA.js,entryB.js,entryC.js——多頁面應用的3個入口

【2】參考文獻： 《Reduce JavaScript Payloads with Code Splitting》


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL表碎片整理
    MySQL表碎片整理 1. 計算碎片大小 2. 整理碎片 2.1 使用alter table table_name engine = innodb命令進行整理。 2.2 使用pt-online-schema-change工具也能進行線上整理表結構，收集碎片等操作。 2.3 使用optimize ta ...
  • 大數據核心知識點：Hbase、Spark、Hive、MapReduce概念理解，特點及機制
    今天，上海尚學堂大數據培訓班畢業的一位學生去參加易普軟體公司面試，應聘的職位是大數據開發。面試官問了他10個問題，主要集中在Hbase、Spark、Hive和MapReduce上，基礎概念、特點、應用場景等問得多。看來，還是非常註重基礎的牢固。整個大數據開發技術，這幾個技術知識點占了很大一部分。那本 ...
  • 每天一個Linux命令（6）：rmdir命令
    rmdir命令用來刪除空目錄 註意：子目錄被刪除之前應該是空目錄。就是說，該目錄中的所有文件必須用rm命令全部，另外，當前工作目錄必須在被刪除目錄之上，不能是被刪除目錄本身，也不能是被刪除目錄的子目錄。 雖然還可以用帶有-r選項的rm命令遞歸刪除一個目錄中的所有文件和該目錄本身，但是這樣做存在很大的 ...
  • Sqlserver UrlEncode
    Sqlserver UrlEncode ...
  • MySQL 聚簇索引和非聚簇索引的認識
    聚簇索引是對磁碟上實際數據重新組織以按指定的一個或多個列的值排序的演算法。特點是存儲數據的順序和索引順序一致。一般情況下主鍵會預設創建聚簇索引，且一張表只允許存在一個聚簇索引。 在《資料庫原理》一書中是這麼解釋聚簇索引和非聚簇索引的區別的：聚簇索引的葉子節點就是數據節點，而非聚簇索引的葉子節點仍然是索 ...
  • 火鍋、報表與資料庫的故事
    本文的題目雖然有點小寫意，卻是純粹的技術分析貼，借用一個火鍋店的故事，探討報表查詢場景下的延遲問題和一點資料庫的特性。很久之前，有一家老字型大小的火鍋店，顧客盈門，生意紅火 ...
  • 前端之CSS
    CSS介紹 CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。 當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。 CSS實例 每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號結束 CSS註釋 CSS ...
  • CSS之換行
    在項目中，常常遇到一些問題，可以通過CSS來快速解決，比如受到佈局影響會導致內容溢出，這個時候就可以使用CSS換行解決 自動換行： { word-wrap:break-word; } 強制不換行： { white-space:nowrap; } 允許在英文單詞內斷行： { word-break:br ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類