記 vue-cli-plugin-dll 使用,優化vue-cli項目構建打包速度

来源:https://www.cnblogs.com/xiaobai-x/archive/2022/06/24/16408879.html
-Advertisement-
Play Games

dll ? 動態鏈接庫英文為DLL,是Dynamic Link Library的縮寫。DLL是一個包含可由多個程式,同時使用的代碼和數據的庫。 起因 在查看hzero前端項目框架介紹時提到了dll,外加之前經常看見dll文件,於是有了興趣瞭解一下 webpack dll。 webpack官網介紹 D ...


dll ?

動態鏈接庫英文為DLL,是Dynamic Link Library的縮寫。DLL是一個包含可由多個程式,同時使用的代碼和數據的庫。

起因

在查看hzero前端項目框架介紹時提到了dll,外加之前經常看見dll文件,於是有了興趣瞭解一下 webpack dll。

webpack官網介紹

DLLPlugin 和 DLLReferencePlugin 用某種方法實現了拆分 bundles,同時還大大提升了構建的速度.

模塊預編譯原理

webpack.dllPlugin本質是將大量復用模塊且不會頻繁更新的庫進行預編譯,且只需要編譯一次,編譯完成後產出指定文件(可以稱為動態鏈接庫)。在之後的構建過程中不會再對這些模塊進行編譯,而是直接使用DllReferencePlugin來引用動態鏈接庫的代碼,因此可以提高構建速度。一般可以將第三方模塊進行預編譯,如 vue、vue-router、vuex等,只要這些依賴模塊不更新,就不需要再重新編譯。

vue-cli-plugin-dll

因為項目使用的vue-cli構建的,搜到了這麼個專門的插件可以使用。
為了實踐效果。使用兩個項目相同的項目來進行對比。

使用** vue create test **創建了個名稱為test的項目,在此基礎上增加了moment / lodash / bignumber / ElementUI / Viewer / mint / VueKinesis 庫來體現效果。

yarn build : 9.37s

yarn serve : 2.08s

複製上面項目出來,重命名項目為test-dll開始實現dll配置。步驟如下:

  1. 執行命令 vue add dll 來安裝 vue-cli-plugin-dll 插件。

  1. 新建vue.config.js 文件來進行相關的配置。
const path = require('path')
module.exports = {
    pluginOptions: {
        dll: {
         // 入口配置
         entry: ['vue','vuex','vue-router','vue-kinesis','v-viewer','moment','mint-ui','lodash','element-ui','core-js','bignumber'],
         // 輸出目錄
         output: path.join(__dirname, './public/dll'),
   
         // 是否開啟 DllReferencePlugin,
         open: true,
   
         // 在執行 `dev` , `build` 等其他指令時,程式會自動將 `dll` 指令生成的 `*.dll.js` 等文件自動註入到 index.html 中。
         inject: true,
       }
     }
}
  1. 生成dll文件

需自行使用命令生成。

npm run dll  // or
yarn dll // or
npx vue-cli-service dll

配置完成,dll文件生成,此時已經將文件都集中到輸出目錄中。來看看效果吧!

yarn build: 4.17s

yarn serve: 0.5s

可以清楚的看到,無論是打包還是構建,速度快了很多。且構建出來的文件同樣可以執行。我們再來對比下線上怎麼請求資源的吧。

test項目:

test-dll項目:

可以看見,主要區別在於 chunk-vendors.js 和 dll.508b73da.dll.js 。
正常的項目 chunk包大小已經到了11M,打包過程和載入也是主要花時間在這。不過並沒有dll包需要載入。
相反,經過dll plugin處理後的項目,chunk包只有不到1M,dll包也只有1.6M,極大的縮減了打包和載入時間。同時在首頁渲染時也是分離了代碼,可以同步進行載入js文件。

當然,我這項目只有文件的引入,沒有業務代碼,對比才會這麼震撼。但是同樣可以看出dll可以實現項目的優化。

多入口配置

在這個的基礎上,可以在對dll文件拆分進行優化。配置如下:

const path = require('path')
module.exports = {
    pluginOptions: {
        dll: {
         // 入口配置
         entry: {
            vue: ["vue", "vue-router", "vuex", 'vue-kinesis'],
            plugin: ["v-viewer",'moment','lodash','bignumber','core-js'],
            ui: ["mint-ui",'element-ui'],
         },
         // 輸出目錄
         output: {
            path: path.join(__dirname, 'public/dll'),
            filename: '[name].dll.js',
            // vendor.dll.js中暴露出的全局變數名
            // 保持與 webpack.DllPlugin 中名稱一致
            library: '[name]_[hash]'
         },
         // 是否開啟 DllReferencePlugin,
         open: true,
   
         // 在執行 `dev` , `build` 等其他指令時,程式會自動將 `dll` 指令生成的 `*.dll.js` 等文件自動註入到 index.html 中。
         inject: true,
       }
     }
}

通過配置多個entry和對應對output來接收。執行 yarn dll 命令後,會生成多個dll.js文件。

yarn build:

yarn serve:

看到打包速度又優化了些,而且可以做到dll.js文件拆分同時載入。
在引入的文件多且臃腫的情況下,使用webpack dll進行性能優化是個很好的選擇。

註意事項

每當生成過dll中存在依賴需進行升級或更新的時候,都要執行 生成dll文件 的命令來生成新的文件。


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

-Advertisement-
Play Games
更多相關文章
  • 鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 CentOS 1.備份原來的源 在控制台輸入mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup備份原本的源 2、下載新的 CentOS-Bas ...
  • 鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 一、環境要求 系統版本:CentOS7.x版本 硬體配置:記憶體2GB以上 cpu2核以上 硬碟大於30G 集群網路配置:集群中所有伺服器內網必須互通,並且需要訪問外網來拉取鏡像 禁用swap分區 二、k8s基礎環境操作: 1、關閉防火牆: [ro ...
  • 程式包編譯安裝的步驟: 源代碼-->預處理-->編譯-->彙編-->鏈接-->執行 多文件:文件中的代碼之間,很可能存在跨文件依賴關係 編譯源碼的項目工具 使用相關的項目管理工具可以大大減少編譯過程的複雜度 根據源碼類型來對這些工具進行分類: C、C++的源碼編譯:使用 make 項目管理器 con ...
  • 1、簡述 binlog 二進位日誌文件,這個文件記錄了MySQL所有的DML操作。通過binlog日誌我們可以做數據恢復,增量備份,主主複製和主從複製等等。 2、Docker中無法使用vim問題解決 https://blog.csdn.net/Tomwildboar/article/details/ ...
  • Android multiple back stacks導航 談談android中多棧導航的幾種實現. 什麼是multiple stacks 當用戶在app里切換頁面時, 會需要向後回退到上一個頁面, 頁面歷史被保存在一個棧里. 在Android里我們經常說"back stack". 有時候在app ...
  • 隨著人們對生活的儀式感的追求,移動設備、可穿戴設備、智能家居設備、車載信息娛樂系統也變得越來越流行。在這些應用上,滑鼠、鍵盤這樣的交互方式不再便捷,而語音作為人類之間最自然的交流方式,語音識別技術儼然已成為各大應用的“標配”。語音識別場景應用十分廣泛,如語音輸入法、語音搜索、實時字幕、游戲娛樂、社交 ...
  • 首先網上很多教程是關於使用swift SMAMB2包的,大部分都是 pod "SMAMB2" 這種方式還是非常簡單的,如果僅僅是這樣還不至於專門寫一篇文章來紀念他。問題就出在我的項目需要用到SMB協議去讀取文件,但是並不是直接讀取! 通俗一點來講就是我的用法和 SMAMB2包提供的用法不同! 那就意 ...
  • Next.js 提供了 Fast-Refresh 能力,它可以為您對 React 組件所做的編輯提供即時反饋。 但是,當你通過 Markdown 文件提供網站內容時,由於 Markdown 不是 React 組件,熱更新將失效。 怎麼做 解決該問題可從以下幾方面思考: 伺服器如何監控文件更新 伺服器 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 準備開個系列來聊一下 PerfView 這款工具,熟悉我的朋友都知道我喜歡用 WinDbg,這東西雖然很牛,但也不是萬能的,也有一些場景他解決不了或者很難解決,這時候藉助一些其他的工具來輔助,是一個很不錯的主意。 很多朋友喜歡在項目中以記錄日誌的方式來監控項目的流轉情況,其實 CoreCL ...
  • 本來閑來無事,準備看看Dapper擴展的源碼學習學習其中的編程思想,同時整理一下自己代碼的單元測試,為以後的進一步改進打下基礎。 突然就發現問題了,源碼也不看了,開始改代碼,改了好久。 測試Dapper.LiteSql數據批量插入的時候,耗時20秒,感覺不正常,於是我測試了非Dapper版的Lite ...
  • 需求如下,在DEV框架項目中,需要在表格中增加一列顯示圖片,並且能編輯該列圖片,然後進行保存等操作,最終效果如下 這裡使用的是PictureEdit控制項來實現,打開DEV GridControl設計器,在ColumnEdit選擇PictureEdit: 綁定圖片代碼如下: DataTable dtO ...
  • 前兩天微軟偷偷更新了Visual Studio 2022 正式版版本 17.3 發佈,發佈摘要: MAUI 工作負荷 GA 生成 MAUI/Blazor CSS 熱重載支持 現在,你將能夠使用我們的新增功能在 Visual Studio 中使用每個更新試用一系列新功能。 選擇每個功能以瞭解有關特定功 ...
  • 航天和軍工領域的數字化轉型和建設正在積極推進,在與航天二院、航天三院、航天六院、航天九院、無線電廠、兵工廠等單位交流的過程中,用戶更聚焦試驗和生產過程中的痛點,迫切需要解決軟體平臺統一監測和控制設備及軟體與設備協同的問題。 ...
  • .NET 項目預設情況下 日誌是使用的 ILogger 介面,預設提供一下四種日誌記錄程式: 控制台 調試 EventSource EventLog 這四種記錄程式都是預設包含在 .NET 運行時庫中。關於這四種記錄程式的詳細介紹可以直接查看微軟的官方文檔 https://docs.microsof ...
  • 一:背景 上一篇我們聊到瞭如何去找 熱點函數,這一篇我們來看下當你的程式出現了 非托管記憶體泄漏 時如何去尋找可疑的代碼源頭,其實思路很簡單,就是在 HeapAlloc 或者 VirtualAlloc 時做 Hook 攔截,記錄它的調用棧以及分配的記憶體量, PerfView 會將這個 分配量 做成一個 ...
  • 背景 在 CI/CD 流程當中,測試是 CI 中很重要的部分。跟開發人員關係最大的就是單元測試,單元測試編寫完成之後,我們可以使用 IDE 或者 dot cover 等工具獲得單元測試對於業務代碼的覆蓋率。不過我們需要一個獨立的 CLI 工具,這樣我們才能夠在 Jenkins 的 CI 流程集成。 ...
  • 一、應用場景 大家在使用Mybatis進行開發的時候,經常會遇到一種情況:按照月份month將數據放在不同的表裡面,查詢數據的時候需要跟不同的月份month去查詢不同的表。 但是我們都知道,Mybatis是ORM持久層框架,即:實體關係映射,實體Object與資料庫表之間是存在一一對應的映射關係。比 ...
  • 我國目前並未出台專門針對網路爬蟲技術的法律規範,但在司法實踐中,相關判決已屢見不鮮,K 哥特設了“K哥爬蟲普法”專欄,本欄目通過對真實案例的分析,旨在提高廣大爬蟲工程師的法律意識,知曉如何合法合規利用爬蟲技術,警鐘長鳴,做一個守法、護法、有原則的技術人員。 案情介紹 深圳市快鴿互聯網科技有限公司 2 ...