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.