highlight | theme |
---|---|
atom-one-light |
mk-cute |
use vite-plugin-imp,on-demand to use libraries.
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.
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:
The lodash functions used in the project includes:
[ 'omit', 'isArray', 'forEach', 'isObject', 'merge', 'isEqual' ]
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';
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';
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
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`
}
},
]
})
]
})
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.
- react-demo
includeelement-ui
,view-design
andvuetify
- vue2-demo
include@arco-design/web-react
,antd
andantd-mobile
- vue3-demo
include@arco-design/web-vue
,ant-design-vue
,element-plus
andvant