記 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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...