vite凭借着简易的Api和极快的热更新已经越来越受前端开发者的欢迎了，越来越多开发者会选择vite来作为项目脚手架。 在web应用开发中，我们经常会使用到一些常用的工具库：lodash、underscore等，或者是UI库antd、ant-design-vue、element-ui、 element-plus、vant等，这些库使用起来整体引入的话会很大，这篇文章的使用心得就是介绍vite应用中如何减少无效代码的引入，使应用体积变小。
使用vite插件vite-plugin-imp,按需引用三方库
最近项目使用vite作为脚手架，项目中使用到了lodash和element-plus，这里就先放上优化前后效果图作为对比：
项目中使用到的lodash函数有
lodash优化前：
lodash优化后：
lodash优化后可以减少500+kb的代码 使用时要求 named import，即
禁止使用default import
项目中使用到的组件有
element-plus优化前：
element-plus优化后：
element-plus优化后同样可以减少500kb+的代码 element-plus使用时同样不可以全局引入，也需要 named import
项目中将使用到的npm 三方库都打包在vender中：
优化前：
优化后：
经过优化lodash和element-plus两个库后整个应用体积减少了超过1000kb（3.29MB=> 2.26MB）的代码，这是非常可观的一个优化效果，这将意味着在其他条件相同的情况下优化后的应用加载可以更快，用户也将得到更好的体验。
分析工具是用的rollup-plugin-visualizer
优化原理，插件将转换代码以减少代码体积：
to
to
经过多个vite项目的优化经验，将这个优化技巧写成了一个插件vite-plugin-imp 使用方式：
目前已内置支持一些常用库
以上就是一些vite项目代码按需引用的优化心得，如果本文对你有帮助，请点个star吧。
公司名称: 天富娱乐-天富医疗器械销售公司
手 机: 13800000000
电 话: 400-123-4567
邮 箱: admin@youweb.com
地 址: 广东省广州市天河区88号
