前端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优化后: 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优化后:
element-plus优化后同样可以减少500kb 的代码 element-plus使用时同样不可以全局引入,也需要 named import
import { ElAvatar, ElTooltip } from 'element-plus';
整体优化
项目中将使用到的npm 三方库都打包在vender中:
优化前: 优化后:
经过优化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: '',
camel2DashComponentName: false
},
{
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
,antd
和antd-mobile
- vue2-demo
使用了element-ui
,view-design
和vuetify
- vue3-demo
使用了@arco-design/web-vue
,ant-design-vue
,element-plus
和vant
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanegib
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01