vite按需引用-优化后减少1000kb代码

·  阅读 3084
vite按需引用-优化后减少1000kb代码

背景

vite凭借着简易的Api和极快的热更新已经越来越受前端开发者的欢迎了,越来越多开发者会选择vite来作为项目脚手架。 在web应用开发中,我们经常会使用到一些常用的工具库:lodash、underscore等,或者是UI库antd、ant-design-vue、element-ui、 element-plus、vant等,这些库使用起来整体引入的话会很大,这篇文章的使用心得就是介绍vite应用中如何减少无效代码的引入,使应用体积变小。

TLDR

使用vite插件vite-plugin-imp,按需引用三方库

优化效果分析对比

最近项目使用vite作为脚手架,项目中使用到了lodash和element-plus,这里就先放上优化前后效果图作为对比:

lodash 优化

项目中使用到的lodash函数有

[ 'omit', 'isArray', 'forEach', 'isObject', 'merge', 'isEqual' ]
复制代码

lodash优化前: lodash_before.png

lodash优化后: lodash_after.png lodash优化后可以减少500+kb的代码 使用时要求 named import,即

import { forEach } from 'lodash';
复制代码

禁止使用default import

import _ from 'lodash';
复制代码

element-plus优化

项目中使用到的组件有

[
  '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优化前: element-plus_before.png
element-plus优化后: element-plus_after.png
element-plus优化后同样可以减少500kb+的代码 element-plus使用时同样不可以全局引入,也需要 named import

import { ElAvatarElTooltip } from 'element-plus';
复制代码

整体优化

项目中将使用到的npm 三方库都打包在vender中:
优化前: vender_before.png 优化后: vender_after.png

经过优化lodash和element-plus两个库后整个应用体积减少了超过1000kb(3.29MB => 2.26MB)的代码,这是非常可观的一个优化效果,这将意味着在其他条件相同的情况下优化后的应用加载可以更快,用户也将得到更好的体验。

分析工具是用的rollup-plugin-visualizer

原理简述

优化原理,插件将转换代码以减少代码体积:

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'
复制代码

经过多个vite项目的优化经验,将这个优化技巧写成了一个插件vite-plugin-imp 使用方式:

// vite.config.js
import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  plugins: [
    // ...
    vitePluginImp({
      libList: [
        {
          libName'lodash',
          libDirectory'',
          camel2DashComponentNamefalse
        },
        {
          libName'antd',
          style(name) {
            // use less
            return `antd/es/${name}/style/index.js`
          }
        },
      ]
    })
  ]
})
复制代码

内置支持

目前已内置支持一些常用库

  • antd-mobile
  • antd
  • ant-design-vue
  • @arco-design/web-react
  • @arco-design/web-vue
  • element-plus
  • element-ui
  • lodash
  • underscore
  • vant
  • view ui
  • vuetify 如果项目中使用到了上面这些 npm 库,使用便会变得更加简单:
// vite.config.js
import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
  plugins: [vitePluginImp()]
})
复制代码

demo

  • react-demo
    使用了 @arco-design/web-react, antdantd-mobile
  • vue2-demo
    使用了 element-ui, view-designvuetify
  • vue3-demo
    使用了 @arco-design/web-vue, ant-design-vue, element-plusvant

以上就是一些vite项目代码按需引用的优化心得,如果本文对你有帮助,请点个star吧。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改