前言
大家都知道前端性能優(yōu)化的方法，cdn外部引入的方法可以使項(xiàng)目打包后體積大大縮小，所以是前端性能優(yōu)化方面非常推薦的方法之一。
本文關(guān)于vite2 vue3 + Ts 項(xiàng)目如何cdn引入element plus做一個(gè)簡單教程，我們可以通過兩種方式引入配置cdn。
由于vite的核心基于rollup和webpack不同，所以cdn引入方式也不同具體rollup配置項(xiàng)可以閱讀vite官網(wǎng)。
本文參考文獻(xiàn)：
rollup ：
plugins ： https://rollupjs.org/guide/en/#plugins
external ：https://rollupjs.org/guide/en/#external
rollup-plugin-external-globals ： https://github.com/eight04/rollup-plugin-external-globals
rollup-plugin-visualizer : https://github.com/btd/rollup-plugin-visualizer
vite：
vite-plugin-cdn-import：https://github.com/mmf-fe/vite-plugin-cdn-import
一、版本確認(rèn)
注意：版本很重要，引入cdn時(shí)建議使用當(dāng)前版本號的url，以防版本更新導(dǎo)致項(xiàng)目部署后失效。
二、使用步驟
1.rollup-plugin-visualizer打包體積可視化面板
rollup打包體積分析，方便我們直觀看到性能優(yōu)化前后打包的體積差異
首先下載依賴npm install --save-dev rollup-plugin-visualizer
引入到vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 插件
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [vue(), visualizer({ open: true })],
})
然后我們在cmd輸入 npm run build 即可彈出一個(gè)打包體積可視化面板
這是我的項(xiàng)目體積，我們可以發(fā)現(xiàn)綠框中 element-plus占用的體積將近1/3,非常的大
而且哪怕按需引入，這個(gè)打包體積只會(huì)減少一點(diǎn)點(diǎn)，所以推薦性能優(yōu)化時(shí)我們使用cdn引入的方式優(yōu)化打包后的項(xiàng)目體積
2.配置cdn方法
這里有兩種方法可以配置，我推薦大家使用前者配置，因?yàn)榈诙N步驟更多，而且ts中聲明文件也有問題要重新配置。
第一種方法： vite-plugin-cdn-import
具體使用方法可以查看github vite-plugin-cdn-import：https://github.com/mmf-fe/vite-plugin-cdn-import
首先下載依賴npm install vite-plugin-cdn-import --save-dev
引入到vite.config.ts
注意：版本號很重要，如果版本有誤差可能導(dǎo)致打包部署到服務(wù)器后，項(xiàng)目無法運(yùn)行?。?！
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 插件
import { visualizer } from 'rollup-plugin-visualizer';
import importToCDN from 'vite-plugin-cdn-import'
export default defineConfig({
plugins: [
vue(),
visualizer({ open: true }),
importToCDN({
modules: [
{
name:"vue",
var:"Vue",
path:"https://unpkg.com/vue@3.2.31"
},
{
name:"element-plus",
var:"ElementPlus",
path:"https://unpkg.com/element-plus@2.1.9",
css:"https://unpkg.com/element-plus/dist/index.css"
}
]
})],
})
到mian.ts中引入
注意：一定不要忘記在main.ts中引入ElementPlus，否則ts會(huì)報(bào)錯(cuò)，vite-plugin-cdn-import 插件應(yīng)該會(huì)自動(dòng)幫我們把ElementPlus通過cdn引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
打包npm run bulid
打包后再看可視化面板RollUp Visualizer可以發(fā)現(xiàn)Elementplus已經(jīng)不占用打包后的體積了
第二種方法： rollup-plugin-external-globals
首先在index.html的head標(biāo)簽中引入link外鏈
<!-- Import Vue 3 -->
<head>
<script src="//unpkg.com/vue@3"></script>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<head>
下載依賴npm install -D rollup-plugin-external-globals
引入到vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 插件
import { visualizer } from 'rollup-plugin-visualizer';
import externalGlobals from 'rollup-plugin-external-globals'
export default defineConfig({
plugins: [
vue(),
visualizer({ open: true }),
})],
build: {
rollupOptions: {
external: ["vue", "element-plus"],
plugins: [
externalGlobals({
vue: "Vue",
"element-plus": "ElementPlus"
})
]
}
},
})
這時(shí)候你會(huì)發(fā)現(xiàn)引入錯(cuò)誤
無法找到模塊“rollup-plugin-external-globals”的聲明文件?！?node_modules/rollup-plugin-external-globals/index.js”隱式擁有 “any” 類型。
嘗試使用npm i --save-dev @types/rollup-plugin-external-globals(如果存在)，或者添加一個(gè)包含declare module 'rollup-plugin-external-globals';的新聲明(.d.ts)文件
我們在項(xiàng)目根目錄新建一個(gè)env.d.ts
輸入這段代碼聲明一個(gè)ts文件
declare module 'rollup-plugin-external-globals';
到mian.ts中引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
打包npm run bulid
打包后再看可視化面板RollUp Visualizer可以發(fā)現(xiàn)Elementplus已經(jīng)不占用打包后的體積了
總結(jié)
這次帶來了兩種方法打包Element plus ，同樣的只要有cdn鏈接，我們就可以用這兩種方式進(jìn)行引入文章來源：http://www.zghlxwxcb.cn/news/detail-446767.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-446767.html
到了這里，關(guān)于vite配置cdn優(yōu)化打包體積的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
