vite按需引用-优化后减少1000kb代码

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 使用方式：

目前已内置支持一些常用库

• antd-mobile
• antd
• ant-design-vue
• @arco-design/web-react
• @arco-design/web-vue
• element-plus
• element-ui
• lodash
• underscore
• vant
• view ui
• vuetify 如果项目中使用到了上面这些 npm 库，使用便会变得更加简单：

• react-demo
  使用了 , 和
• vue2-demo
  使用了 , 和
• vue3-demo
  使用了 , , 和

---

以上就是一些vite项目代码按需引用的优化心得，如果本文对你有帮助，请点个star吧。