背景

vite凭借着简易的Api和极快的热更新已经越来越受前端开发者的欢迎了，越来越多开发者会选择vite来作为项目脚手架。 在web应用开发中，我们经常会使用到一些常用的工具库：lodash、underscore等，或者是UI库antd、ant-design-vue、element-ui、 element-plus、vant等，这些库使用起来整体引入的话会很大，这篇文章的使用心得就是介绍vite应用中如何减少无效代码的引入，使应用体积变小。

TLDR

使用vite插件vite-plugin-imp,按需引用三方库

优化效果分析对比

最近项目使用vite作为脚手架，项目中使用到了lodash和element-plus，这里就先放上优化前后效果图作为对比：

lodash 优化

项目中使用到的lodash函数有

[ 'omit', 'isArray', 'forEach', 'isObject', 'merge', 'isEqual' ]

lodash优化前：

lodash优化后： lodash优化后可以减少500+kb的代码 使用时要求 named import，即

import { forEach } from 'lodash';

禁止使用default import

import _ from 'lodash';

element-plus优化

项目中使用到的组件有

[
  'el-loading',        'el-row',
  'el-col',            'el-menu',
  'el-menu-item',      'el-container',
  'el-main',           'el-aside',
  'el-tabs',           'el-tab-pane',
  'el-table',          'el-table-column',
  'el-select',         'el-option',
  'el-input',          'el-message',
  'el-header',         'el-avatar',
  'el-tooltip',        'el-footer',
  'el-button',         'el-space',
  'el-cascader',       'el-date-picker',
  'el-radio',          'el-dialog',
  'el-checkbox-group', 'el-checkbox',
  'el-radio-group',    'el-radio-button',
  'el-pagination',     'el-icon',
  'el-breadcrumb',     'el-breadcrumb-item',
  'el-popover',        'el-tag',
  'el-empty',          'el-input-number',
  'el-message-box'
]

element-plus优化前： element-plus优化后： element-plus优化后同样可以减少500kb+的代码 element-plus使用时同样不可以全局引入，也需要 named import

import { ElAvatar, ElTooltip } from 'element-plus';

整体优化

项目中将使用到的npm 三方库都打包在vender中： 优化前： 优化后：

经过优化lodash和element-plus两个库后整个应用体积减少了超过1000kb（3.29MB => 2.26MB）的代码，这是非常可观的一个优化效果，这将意味着在其他条件相同的情况下优化后的应用加载可以更快，用户也将得到更好的体验。

分析工具是用的rollup-plugin-visualizer

原理简述

优化原理，插件将转换代码以减少代码体积：

import { forEach } from 'lodash'

forEach([1,2], console.log)

to

import forEach from 'lodash/forEach'

forEach([1,2], console.log)

---

import { Progress } from 'vant'

to

import { Progress } from 'vant'
import 'vant/es/progress/style/index.js'

经过多个vite项目的优化经验，将这个优化技巧写成了一个插件vite-plugin-imp 使用方式：

// vite.config.js
import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  plugins: [
    // ...
    vitePluginImp({
      libList: [
        {
          libName: 'lodash',
          libDirectory: '',
          camel2DashComponentName: false
        },
        {
          libName: 'antd',
          style(name) {
            // use less
            return `antd/es/${name}/style/index.js`
          }
        },
      ]
    })
  ]
})

内置支持

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

• 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 库，使用便会变得更加简单：

// vite.config.js
import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
  plugins: [vitePluginImp()]
})

react / vue demo

• react-demo 使用了 @arco-design/web-react, antd 和 antd-mobile
• vue2-demo 使用了 element-ui, view-design 和 vuetify
• vue3-demo 使用了 @arco-design/web-vue, ant-design-vue, element-plus 和 vant

---

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