background

With its easy Api and extremely fast hot updates, Vite is becoming more and more popular with front-end developers as a scaffold for their projects. In Web application development, we often use some common tool libraries: Lodash, underscore, etc., or UI libraries ANTD, Ant-design-Vue, Element-UI, Element-Plus, Vant, etc., all of which can be quite big to use as a whole. The purpose of this article is to show you how to reduce the introduction of invalid code in vite applications and make them smaller.

TLDR

Use the vite plugin vite-plugin-IMP to reference tripartite libraries as needed

Optimization effect analysis and comparison

A recent project used Vite as scaffolding. Lodash and Element-Plus were used in the project. Here are the before and after optimization renderings for comparison:

Lodash optimization

The Lodash functions used in the project are

[ 'omit'.'isArray'.'forEach'.'isObject'.'merge'.'isEqual' ]
Copy the code

Lodash before optimization:

Optimized for LoDash:Lodash has been optimized to reduce code usage by 500+ KB requiring named import, i.e

import { forEach } from 'lodash';
Copy the code

Disallow default import

import _ from 'lodash';
Copy the code

Element – plus optimization

The components used in the project are

[
  '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'
]
Copy the code

Before elemental-Plus optimization:

After element-Plus optimization:

Elder-plus optimization can also reduce 500KB + code. Elder-plus can also not be used globally, so named import is required

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

Whole optimization

The NPM tripartite libraries that will be used in the project are packaged in Vender:

Before optimization:After the optimization:

The lodash and Element-Plus libraries have been optimized to reduce the size of the entire application by more than 1000KB. This is a significant optimization and will mean that, all other things being equal, the optimized application will load faster. Users will also get a better experience.

The analysis tool is used with rollup-plugin-Visualizer

The principle is briefly

The principle of optimization, the plug-in will transform code to reduce code size:

import { forEach } from 'lodash'

forEach([1.2].console.log)
Copy the code

to

import forEach from 'lodash/forEach'

forEach([1.2].console.log)
Copy the code
import { Progress } from 'vant'
Copy the code

to

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

After several vite project optimization experience, this optimization technique is written into a plug-in vite-plugin-IMP use:

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

Built-in support

Some common libraries are now built in

  • 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 your project, they become much easier to use:

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

demo

  • react-demo

    Using the@arco-design/web-react.antd 和 antd-mobile
  • vue2-demo

    Using theelement-ui.view-design 和 vuetify
  • vue3-demo

    Using the@arco-design/web-vue.ant-design-vue.element-plus 和 vant

These are some of the optimization tips that vite project code cites on demand. If this article helps you, please click star.