记录一次vue3+vite项目的优化

语言: CN / TW / HK

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:

image.png

1,首先是工具类lodash,占了5%多。

-- 改用改用lodash-es,按需加载。

结果:整个项目体检减少了0.5m

image.png

2,echart

-- 按需引入,本来项目也只用到了折线图,曲线区,以及饼状图 参考:https://echarts.apache.org/handbook/zh/basics/import/

结果:整个项目体检减少了1.3m(echart真重啊,可以考虑换更轻量级的可视化工具。)

image.png

3,vuedraggable,vue的拖放组件

-- 经查资料,该拖放组件只是对sortable.js的vue封装,这里我的处理是卸载该组件,自己根据sortable对封装一个符合业务要求的拖放组件

结果:需求可以满足,项目体积减少0.2m

image.png

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。

image.png

5,monentJs改用dayJs。这里就不截图了。

最后,整个项目下来,比原来体积少了足足一半,各位大佬,该项目还有啥可以优化的,可以留言指点一下,不胜感激。

再记录个问题,vite打包有个问题,hash不是根据内容改变而改变的,其实就是webpack的conthash。到github上找了下,发现框架内确实无解,可以hack曲线救国,参照issue: https://github.com/vitejs/vite/issues/6773 发现这个并不有效,各位大佬,有什么方法可以实现该功能。