记录一次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
-- 按需引入，本来项目也只用到了折线图，曲线区，以及饼状图 参考：http://echarts.apache.org/handbook/zh/basics/import/
结果：整个项目体检减少了1.3m（echart真重啊，可以考虑换更轻量级的可视化工具。）
3，vuedraggable，vue的拖放组件
-- 经查资料，该拖放组件只是对sortable.js的vue封装，这里我的处理是卸载该组件，自己根据sortable对封装一个符合业务要求的拖放组件
结果:需求可以满足，项目体积减少0.2m
4，再次优化echart+拖放组件
-- echart采用cdn的方式引入 http://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: http://github.com/vitejs/vite/issues/6773 发现这个并不有效，各位大佬，有什么方法可以实现该功能。