On-demand to use libraries in Vitejs project

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.

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.

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:

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

Originally published at https://gist.github.com.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How we employed the new ECMAScript Module Support in typescript

10 Tricky things about JavaScript

React Native — Native Modules Part 2 (IOS)

Make an expense tracker app💰 within 20 minutes or less in vanilla javascript(minimum CSS)

Build a Simple Discord Bot in Node.js for Beginners

Data Analysis with DHTMLX JavaScript Libraries

Upgrading to React 16.3.X, Flow 0.53.0, and Beyond

Bootstrap UI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
tony Phang

tony Phang

More from Medium

Team Saturn's E-learning website

In Simple Language How Do You Explain Navigation?

In Simple Language How Do You Explain Navigation?

Why does C KingDom choose to launch on Binance Smart Chain(BSC)?

Sinatra Project