element-plus_after.png

element-plus_before.png

lodash_after.png

lodash_before.png

vender_after.png

vender_before.png

Vite-on-demand.md

highlight	theme
atom-one-light	mk-cute

TLDR

use vite-plugin-imp,on-demand to use libraries.

Background

Vite is becoming more and more popular among web developers In web application development, some commonly used tool libraries are often used: lodash, underscore, etc., or UI libraries antd, ant-design-vue, element-ui, element-plus, vant, etc.

When you don't use these libraries on demand in your project, the size of the project bundle will be very large.

Optimization effect analysis and comparison

Recently, the project is use vite as scaffolding, lodash and element-plus were used in the project. Here is the effect picture before and after optimization for comparison:

lodash optimization

The lodash functions used in the project includes:

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

lodash before optimize:

lodash after optimize:

After lodash is optimized, it can reduce 500+kb of code.
We need to use lodash named import:

import { forEach } from 'lodash';

Don't use default import

import _ from 'lodash';

element-plus optimization

The element-plus components used in the project are below:

[
  '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 before optimize:

element-plus after optimize:

After element-plus is optimized, bundle of element-plus can also reduce the code of 500kb+, and it is also need to be named import.

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

Overall optimization

The npm third-party libraries used in the project are packaged in the vendor:
Before optimize：
After optimize：

After optimizing the two libraries, the size of the application bundle has been reduced more than 1000kb (3.29MB => 2.26MB). This is a very impressive optimization effect. that mean users of your application will get a better experience.

Analysis tools is rollup-plugin-visualizer

Brief description of principle

Optimization principle, the plugin will convert the code to reduce the bundle size as below:

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'

After the optimization experience of lot of vite projects, vite-plugin-imp was born.

// 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`
          }
        },
      ]
    })
  ]
})

Build-in support

Some popular libraries are currently built-in support:

• antd-mobile
• antd
• ant-design-vue
• @arco-design/web-react
• @arco-design/web-vue
• element-plus
• element-ui
• lodash
• underscore
• vant
• view ui
• vuetify

If the above npm libraries are used in the project, it will become easier to use:

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

If you are using a library not in the built-in support, feel free to open an issue.

demo

• react-demo
  include element-ui, view-design and vuetify
• vue2-demo
  include @arco-design/web-react, antd and antd-mobile
• vue3-demo
  include @arco-design/web-vue, ant-design-vue, element-plus and vant