記錄一次vue3+vite專案的優化
theme: fancy
b端專案,前期工期短,效能優化上的工作延後處理,專案第一期上線後,著手優化。
# build 檢視分析依賴檔案
vite使用rollup-plugin-visualizer外掛,分析依賴檔案
```
import visualizer from 'rollup-plugin-visualizer'
export default ({ mode }) => {
return defineConfig({
build: {
rollupOptions: {
plugins: [
visualizer({
open: true
})
],
}
},
}
``` 優化前,build後的dist檔案高達7.4MB:
1,首先是工具類lodash,佔了5%多。
-- 改用改用lodash-es,按需載入。
結果:整個專案體檢減少了0.5m
2,echart
-- 按需引入,本來專案也只用到了折線圖,曲線區,以及餅狀圖 參考:https://echarts.apache.org/handbook/zh/basics/import/
結果:整個專案體檢減少了1.3m(echart真重啊,可以考慮換更輕量級的視覺化工具。)
3,vuedraggable,vue的拖放元件
-- 經查資料,該拖放元件只是對sortable.js的vue封裝,這裡我的處理是解除安裝該元件,自己根據sortable對封裝一個符合業務要求的拖放元件
結果:需求可以滿足,專案體積減少0.2m
4,再次優化echart+拖放元件
-- echart採用cdn的方式引入 https://echarts.apache.org/zh/builder.html 官網有定製的cdn連結,只需要勾選我們要的功能,然後下載到我們本地。 同理,sortable.js的處理方式也是一樣。由於拖放元件+echart並不是所有頁面都有使用,這裡使用動態載入js的方法。
/**
* @method 動態載入js
* @param {String} url 需要載入的url地址
* @param {String} name 需要載入script的name
*/
export const dynamicScript = (url, name) => {
return new Promise(resolve => {
if (window[name]) {
resolve(window[name])
} else {
let script = _createElement({
tag: 'script',
attr: {
type: 'text/javascript'
}
})
if (script.readyState) {
//IE
script.onreadystatechange = function() {
if (
script.readyState === "loaded" ||
script.readyState === "complete"
) {
script.onreadystatechange = null
resolve(window[name])
}
};
} else {
//Others
script.onload = function() {
resolve(window[name])
}
}
script.src = url
document.getElementsByTagName("head")[0].appendChild(script)
}
})
}
結果是:echart+sorable.js不再打包到dist檔案,進一步縮小體積,這次體檢減少了1.4M。
5,monentJs改用dayJs。這裡就不截圖了。
最後,整個專案下來,比原來體積少了足足一半,各位大佬,該專案還有啥可以優化的,可以留言指點一下,不勝感激。
再記錄個問題,vite打包有個問題,hash不是根據內容改變而改變的,其實就是webpack的conthash。到github上找了下,發現框架內確實無解,可以hack曲線救國,參照issue: https://github.com/vitejs/vite/issues/6773 發現這個並不有效,各位大佬,有什麼方法可以實現該功能。