記錄一次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 發現這個並不有效，各位大佬，有什麼方法可以實現該功能。