記 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
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...