共计 3624 个字符，预计需要花费 10 分钟才能阅读完成。
- NutUI 4.0 Github 地址：github.com/jdf2e/nutui
- NutUI 4.0 官网：nutui.jd.com
前言
技术日异月新、倒退翻新、继续的迭代已成为常态。NutUI 虽通过 v1.0、v2.0、v3.0 三次技术变质，仍面临很多兼容、破坏性调整的需要。随着咱们本身承接业务的多样性变动及社区诉求日渐增多，大调整和降级势在必行，通过团队及社区开发者 3 个多月的开发和自测，在 2023 辞旧迎新之际咱们正式公布 NutUI 4.0。
NutUI 4.0 带来了 CSS 动静主题 、icon 图标库、 主动按需引入 、 新增组件 、 更轻量的用户体验，围绕组件丰富性、轻量化、易用性力求将组件的品质和体验晋升一个台阶。
新性能
CSS Variables 动静主题
NutUI 4.0 新增 CSS Variables 动静主题，在我的项目运行时，通过 CSS 变量笼罩默认款式，实现定制主题、动静切换主题、暗黑模式等换肤性能，晋升产品易用性。
CSS Variables 实质是一系列的款式属性，默认值被定义在 :root 节点上，与 NutUI 3 的定制主题、在线主题定制性能相比，用户无需新建自定义 Scss 变量文件，只需通过 ConfigProvider 组件实现实时动静主题切换，应用形式更加简洁、灵便。
<script setup lang="ts">
const themeVars = reactive({buttonBorderRadius: '10px'});
</script>
<template>
<nut-config-provider :theme-vars="themeVars">
<nut-button type="primary"> 次要按钮 </nut-button>
</nut-config-provider>
</template>NutUI 4.0 保留原有的主题定制、在线主题定制性能，开发中依据我的项目的理论需要进行综合考量，按需选取适宜业务场景的换肤形式。
专属图标库
NutUI 4.0 新增专属图标库。@nutui/icons-vue H5 图标包与 @nutui/icons-vue-taro Taro 图标包，专属图标库是将原 NutUI Icon 组件剥离，从而缩小 NutUI 包体积 464kB，晋升了轻量化体验。
专属图标库放弃京东格调，应用形式包含 IconFont 全量引入，新增 SVG 按需引入形式。
按需应用
import {Add} from '@nutui/icons-vue';
<Add color='red'>全量应用
import {IconFont} from '@nutui/icons-vue';
<IconFont name="dongdong"></IconFont>随着专属图标库的诞生，NutUI 4.0 中所有组件内置图标的应用形式也产生了变动，都能够通过插槽进行自定义，图标款式、大小、色彩均由开发者配置，灵便度大幅晋升。
<template>
<nut-navbar title="订单详情">
<template #right>
<ShareN width="16px" color='#fff'></ShareN>
</template>
</nut-navbar>
</template>
<script>
import {ShareN} from '@nutui/icons-vue';
</script>主动按需引入
NutUI 4.0 新增更高效的主动按需引入形式。通过 unplugin-vue-components 实现按需引入，移除 babel-plugin-import、vite-plugin-style-import 插件。
与 babel-plugin-import、vite-plugin-style-import 相比，unplugin-vue-components 反对在 Vite、Webpack、Vue CLI 等我的项目中主动引入组件，按需引入款式也不再强依赖于 babel，开发者能够抉择 SWC、esbuild 等其余效率更高的编译工具，进而晋升编译效率，Taro 小程序的开发体验也随之晋升。
为了适配 unplugin-vue-components 插件，NutUI 4.0 对局部组件的名称与应用形式进行了调整
- nut-fixednav -> nut-fixed-nav
- nut-checkBoxgroup -> nut-checkBox-group
- … …
更多组件名称调整可参考官网 从 v3 降级到 v4。
组件更欠缺
NutUI 4.0 除新增性能外，也增强了组件的易用性、丰富性，力求组件更高效、涵盖更多的业务场景。
新组件
NutUI 4.0 新增 2 个组件，为 NutUI 注入 ” 新鲜血液 ”。
咱们深信 80 相对不是组件库的数量极限，开掘更多新组件，让组件库更丰盛，是咱们继续一直在做的事件。
-
Tour
新增 Tour 组件，用于疏导用户理解产品性能。
-
PullRefresh
新增 PullRefresh 组件，用于下拉刷新的交互操作。
易用性晋升
NutUI 4.0 对 20+ 个组件做了破坏性变更，晋升组件灵便度、复用率、扩展性。
NutUI 致力于打造一款好用的组件库，4.0 期间对组件进行深度优化革新，诸如功能设计不合理、灵便度不高、场景笼罩不全、扩展性不强等问题。
- ShortPassword 不再依赖原生键盘，Demo 演示中键盘替换为 Numberkeyboard 组件，自由组合应用，灵便度更高
- 精简 Input 组件 Props，使其具备与 Form 组件相互搭配应用的能力，晋升组件复用率
- InfiniteLoading 组件删除下拉刷新性能，组件功能定位更加清晰，性能更加纯正
- Picker 组件删除内置 Popup 性能，平铺展现，满足更多的应用场景。同时也批改基于 Picker 派生出的 DatePicker 组件。
- … …
更多组件 API 调整可参考官网 从 v3 降级到 v4
轻量化
NutUI 始终以来以 轻量化 为核心理念，在组件体积、NPM 依赖、构建产物等方面继续进行优化。相较于 NutUI 3.3.1，NutUI 4.0 的装置体积由 14MB 降落至 8MB，缩小 42%。
注：上述数据来自于 packagephobia
NutUI 4.0 在包体积上也有了显著的降落，由 3.81MB 降落至 2.3MB，缩小 39%。
组件瘦身
NutUI 4.0 对 10+ 个组件进行了优化，通过重构、逻辑批改、公共函数提取等形式，不仅增强了组件的健壮性，进步扩展性，也使 NutUI 的压缩前体积缩小了 50kB。
- Popover 组件进行重构，去掉第三方依赖包，实现 0 内部依赖
- 优化 H5 与 Taro 独特须要编译函数，实现每端代码包的每行代码都是不可或缺的
- 提取公共函数 5 个，缩小冗余代码
- … …
图标瘦身
NutUI 4.0 新增专属图标库，不仅安装包体积缩小 595kB。
同时，NutUI 4.0 删除 125 个字体图标的 font 文件，包体积缩小 464kB。
另外，专属图标库提供按需引入形式，在应用了 NutUI 的我的项目打包时，也只会引入组件内置图标，不会全量引入，我的项目包体积均匀缩小 50+ kB。
副作用革除
NutUI 4.0 优化打包策略，nutui.es.js 由全量引入改为按需加载，其文件体积由 624kB 降落至 11.9kB，缩小 612kB。同时，防止了副作用的产生。
技术升级
NutUI 4.0 进行了底层架构降级来撑持一直退出的新性能，共建亦有全新体验。
-
构建工具降级
NutUI 4.0 将底层构建工具从 Vite 2 降级到 Vite 4，构建工夫缩小了 10 秒
-
库类型申明降级
NutUI 4.0 开始，不在应用第三方插件
vite-plugin-dts，改用 vue 官网举荐的vue-tsc生产类型申明文件。同时，与 Volar 插件两者联合实现查看类型谬误能力。
将来
NutUI 倒退至今，咱们始终在学习始终在思考，除了提供更加丰盛的组件、优化现有组件外，还须要做哪些事件能力服务到更多的开发者，真正做到高效、灵便、好用。
NutUI 作为挪动端组件库，4.0 开始会分为 根底组件 与 高级组件 两个方向。针对根底组件，开发方向拆分为 H5、小程序、APP，丰盛更多的“端”需要。
在过来，NutUI 积淀了 大促域 与抽奖域 高级组件库，在 NutUI 4.0 迭代同时，咱们总结过往开发业务组件的教训，梳理并推出 商城域 业务组件，包含商品类、优惠券类、订单类、发票类共计出 20+ 个高级组件。目前正缓和开发中，不久将与大家见面，敬请赐候~
最初
NutUI 的继续迭代离不开使用者和开发者的长期反馈和反对，特别感谢本次为 NutUI 4.0 做出奉献的社区开发者：@Coffee-C、@gyt95、@jxt776、@kasonyang、@mikasayw、@sjx12、@thx125、@xiaosifeng。愿大家在开源的路线上步履不停~
大家在开发中遇到任何问题，能够在 GitHub 或咚咚交换群（82957939）与咱们分割，或者邮件至 nutui@jd.com，也欢送大家为 NutUI Star。
相干链接：
- NutUI GitHub
- NutUI 4.0 官网
- 京东小程序官网
