導航:首頁 > 源碼編譯 > vue優化編譯體積

vue優化編譯體積

發布時間:2025-03-23 19:52:53

❶ 使用 unplugin-vue-components 按需引入組件(內附實現原理)

使用 unplugin-vue-components 按需引入組件,能夠實現減小項目體積、提升性能的效果。相比於全局引入組件庫的便利性,按需引入組件庫在一定程度上減少了體積大小,但存在引入組件和樣式的繁瑣操作。為解決這一問題,babel-plugin-import 通過插件形式,簡化了引入過程,使得 style 的引入變得更為便捷。然而,仍需手動引入組件,並依賴於 babel。

unplugin-vue-components 則提供了一種更簡便的按需引入組件的方式,無需手動引入組件,使得開發者能夠像全局引入組件那樣進行開發。它通過內置支持主流 UI 組件庫和解析器(resolvers),自動引入對應的組件及樣式,極大地提高了開發效率。解析器可以是函數或對象,當遇到特定組件時,解析器會自動處理並引入組件及樣式。

以 Antd Vue 和 Vite 為例,unplugin-vue-components 能夠自動引入 Antd Vue 組件,無需手動導入組件與樣式,使用體驗與全局組件類似。實現這一功能的關鍵在於 Vue 編譯過程中的代碼修改。unplugin-vue-components 通過正則匹配 Vue 的全局組件,調用解析器進行組件引入,並替換原有的全局組件引用,實現了按需引入的效果。

實現原理上,unplugin-vue-components 並未對 Vue 文件的結構進行復雜的修改,而是在 Vue 編譯後的代碼上進行操作,通過正則匹配和函數調用實現了按需引入組件。這種方法僅適用於基於模板編譯的代碼,對於使用 JSX 的自動引入,unplugin-auto-import 能夠與之協同工作。

unplugin-vue-components 還支持自動引入項目 components 目錄下的組件,並允許用戶自定義指定的自動按需引入規則。使用時只需安裝該插件並配置相關選項即可。

總結起來,unplugin-vue-components 提供了一種高效、簡便的組件引入方式,適用於 Vue 項目的開發。它不僅能夠減小項目體積,提升載入速度,還能優化用戶體驗。對於開發者而言,使用該工具可以顯著提升開發效率,並通過自定義配置實現更靈活的組件管理策略。

❷ 詳解Webpack如何引入CDN鏈接來優化編譯後的體積



背景


在 Vue 項目中,引入到工程中的所有 js 文件,編譯時都會被打包進 vendor.js,也就導致了 vendor.js 文件體積變得相當臃腫,一定程度上影響著頁面的渲染。為了減少編譯後的體積,提高頁面渲染速度,我們可以通過引入 CDN 鏈接把庫分離,多線程非同步 js 庫,從而達到加速渲染的目的。那麼我們如何做呢?

步驟


1.引入CDN鏈接


在項目的 index.html 中,常規方式引入 CDN 鏈接,此處以 vue 和 element-ui 為例:

<body>
<div id="app"></div>
<!-- CDN方式引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- CDN方式引入element-ui -->
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
</body>
2.添加externals屬性


Vue-cli 2

在項目的 build/webpack.base.conf.js 中,在下面合適位置添加 externals 相關語句,在 entry 後面加入即可:

mole.exports = {
context: path.resolve(__dirname, '../'),
entry: {
function: './src/main.js'
},
externals:{
'vue': 'Vue',
'element-ui': 'ElementUI'
}
...
}
Vue-cli 3

在項目根目錄的 vue.config.js 中,將 configureWebpack 配置代碼塊添加進入即可:

mole.exports = {
configureWebpack:{
externals: {
'vue': 'Vue',
'element-ui': 'ElementUI'
}
}
}
注意:在上述代碼中,'vue': 'Vue' 對應形式為 key : value,其中 key 為項目中引用的名稱,而 value 是資源本身定義的名稱(不可改),正常情況下我們可以參照 src/main.js 進行查看:

import Vue from 'vue'
import ElementUI from 'element-ui'
//打開src/main.js查閱以上兩行代碼,其前面作為value,後面作為key。
3.注釋import及Vue.use(xxx)


在項目的 src/main.js 中,注釋掉以下語句:

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
Vue.config.proctionTip = false
// Vue.use(ElementUI)
註:使用 eslint 規則的項目請不要注釋 import 及 Vue.use,除非你不使用那煩人的 eslint。

完成以上步驟後就可以開始執行 npm run build,你會發現編譯後的 vendor.js 從幾百K降到幾十K,也就意味著優化體積已經成效。另外,有好多網友先前為了減少體積就已經配置了 按需引入,如果引入 CDN 之後,記得把按需引入的配置去掉哦,因為引入 CDN 之後就不存在按需引入這種說法啦!

閱讀全文

與vue優化編譯體積相關的資料

熱點內容
雲伺服器建設原理 瀏覽:258
javajunit4for 瀏覽:845
華為伺服器如何進陣列卡配置 瀏覽:435
apache伺服器ip地址訪問 瀏覽:718
如何買到安卓手機預裝軟體 瀏覽:537
冤罪百度雲不要壓縮 瀏覽:87
蘇州雲存儲伺服器 瀏覽:175
解壓收納原聲 瀏覽:385
java注冊驗證 瀏覽:375
火花app怎麼上推薦 瀏覽:980
什麼app能游戲投屏到電視上 瀏覽:455
伺服器託管到雲端是什麼意思 瀏覽:836
app保存草稿怎麼用 瀏覽:808
安卓如何進入proumb 瀏覽:144
主機虛擬雲伺服器 瀏覽:619
刪除分區加密的空間會不會恢復 瀏覽:706
京東app客戶上門怎麼看搜索量 瀏覽:741
怎麼在農行app購買黃金 瀏覽:46
c型開發板和單片機 瀏覽:146
虛擬機建立用戶的模板文件夾 瀏覽:905