NutUI4.0Github地址：github.com/jdf2e/nutuiNutUI4.0官网：nutui.jd.com前言科技日新月异，发展创新，不断迭代成为常态。NutUI虽然经历了v1.0、v2.0、v3.0的3次技术改造，但仍然面临诸多兼容性要求和破坏性调整。随着我们自身业务的多元化和社会需求的增加，大的调整和升级势在必行。经过团队和社区开发者3个多月的开发和自测，我们在2023年正式辞旧迎新，发布NutUI4.0。NutUI4.0带来了CSS动态主题、icon图标库、自动按需引入、全新组件、更轻便的用户体验，围绕组件的丰富性、轻量级、易用性，着力提升组件的品质和体验。新增功能CSSVariables动态主题NutUI4.0新增CSSVariables动态主题。项目运行时，可通过CSS变量覆盖默认样式，完成自定义主题、动态切换主题、深色模式等换肤功能，提高产品易用性。CSSVariables的本质是一系列样式属性，默认值定义在:root节点上。相比于NutUI3的自定义主题和在线主题自定义功能，用户无需新建自定义Scss变量文件，只需要通过ConfigProvider组件实时实现即可。动态主题切换，使用更简洁灵活。主按钮NutUI4.0保留了原有的主题定制和在线主题定制功能，在开发过程中综合考虑了项目的实际需求。根据需要选择适合业务场景的换肤方式。专属图标库NutUI4.0新增专属图标库。@nutui/icons-vueH5图标包和@nutui/icons-vue-taroTaro图标包，专属图标库，剥离原有NutUIIcon组件，减少NutUI包大小464kB，提升轻量化体验。专属图标库，保持京东风格。使用方法包括IconFont的全量导入，以及新增的按需导入SVG的方法。使用import{Add}from'@nutui/icons-vue';使用import{IconFont}from'@nutui/icons-vue';随着专属图标库的诞生，NutUI4.0所有组件的内置图标使用方式也发生了变化，可以通过插槽进行自定义。图标样式、大小、颜色均可由开发者自行配置，推广灵活。按需自动导入NutUI4.0增加了更高效的自动按需导入方式。通过unplugin-vue-components实现按需导入，移除babel-plugin-import、vite-plugin-style-import插件。与babel-plugin-import和vite-plugin-style-import相比，unplugin-vue-components支持在Vite、Webpack、VueCLI等项目中自动导入组件，按需导入样式不再强依赖babel、开发者可以选择SWC、esbuild等更高效的编译工具来提升编译效率，Taro小程序的开发体验也将得到相应提升。为了适配unplugin-vue-components插件，NutUI4.0对部分组件的名称和用法进行了调整。nut-fixednav->nut-fixed-navnut-checkBoxgroup->nut-checkBox-group......更多组件名称调整，请参考官网从v3升级到v4。组件更完备除了新功能，NutUI4.0还增强了组件的易用性和丰富性，力求让组件更高效，覆盖更多业务场景。新组件NutUI4.0新增2个组件，为NutUI注入“新鲜血液”。我们坚信，80个绝对不是组件库数量的极限。不断挖掘更多新元器件，丰富元器件库，是我们一直在做的事情。Tour新增Tour组件，用于引导用户了解产品功能。PullRefresh新增PullRefresh组件，用于下拉刷新的交互操作。易用性提升NutUI4.0对20+个组件进行了破坏性改动，提高了组件的灵活性、复用性和扩展性。NutUI致力于打造易用的组件库。4.0时期，组件深度优化改造，功能设计不合理，灵活性低，场景覆盖不全，扩展性差。ShortPassword不再依赖于本机键盘。Demo中将键盘替换为Numberkeyboard组件，可以自由组合使用，更加灵活。精简Input组件Props，使其具备与Form组件协同工作的能力，提高组件复用率。InfiniteLoading组件删除了下拉刷新功能，组件功能定位更清晰，功能更纯粹。Picker组件去掉了内置的Popup功能，平铺展示，满足更多的使用场景。同时修改派生自Picker的DatePicker组件。...更多组件API调整请参考官网从v3升级到v4轻量级NutUI一直以轻量级为核心理念，在组件大小、NPM依赖、构建产品等方面持续优化。与NutUI3.3.1相比，NutUI4.0的安装体积从14MB下降到8MB，减少了42%。注：以上数据来自packagephobia。NutUI4.0包大小也有明显下降，从3.81MB到2.3MB，减少了39%。组件瘦身NutUI4.0优化了10+组件。通过重构、修改逻辑、抽取公共函数，不仅增强了组件的健壮性，提高了扩展性，而且压缩前NutUI的大小减少了50kB。重构Popover组件，去除第三方依赖包，实现0外部依赖优化。H5和太郎需要一起编译功能，实现代码包两端每一行代码缺一不可。提取5个公共功能，减少冗余代码...图标瘦身NutUI4.0新增专属图标库，不仅安装包大小减少了595kB。同时，NutUI4.0删除了125个字体图标的字体文件，压缩包大小464kB。此外，专属图标库提供按需导入方式。使用NutUI的项目在打包时，只会导入组件的内置图标，不会导入全量。项目包的平均大小减少了50+kB。消除副作用。NutUI4.0优化了打包策略。Nutui.es.js由全量导入改为按需加载，文件大小由624kB缩小到11.9kB，减少了612kB。同时，避免了副作用的产生。技术升级NutUI4.0升级了底层架构，支持不断添加的新功能，共建也带来全新体验。构建工具升级NutUI4.0底层构建工具从Vite2升级到Vite4，构建时间缩短10秒库类型声明升级NutUI4.0，不再使用第三方插件vite-plugin-dts，使用vue-官方推荐vue-tsc生成类型声明文件。同时结合Volar插件实现类型错误检查能力。以后NutUI的发展以来，我们一直在学习和思考。除了提供更丰富的组件，优化现有组件，还需要做些什么才能服务更多的开发者，真正做到高效、灵活、易用。NutUI作为移动端组件库，从4.0开始将分为基础组件和高级组件两个方向。基础组件，开发方向分为H5、小程序、APP，丰富更多“端”需求。过去，NutUI为大促领域和彩票领域积累了高阶组件库。在NutUI4.0迭代的同时，我们总结了以往开发业务组件的经验，整理并推出了商城领域的业务组件，包括商品、优惠券、订单、发票类共20个+高级组件。目前我们正在紧锣密鼓的开发中，很快就会和大家见面，还请大家送上祝福~最后，NutUI的不断迭代离不开用户和开发者的长期反馈和支持。特别感谢本次为NutUI4.0做出贡献的社区开发者：@Coffee-C、@gyt95、@jxt776、@kasonyang、@mikasayw、@sjx12、@thx125、@xiaosifeng。愿你在开源的路上一直走下去~如果你在开发过程中遇到任何问题，可以在GitHub或者东东交流群（82957939）联系我们，或者发邮件至nutui@jd.com，欢迎大家为NutUI投稿星星。相关链接：NutUIGitHubNutUI4.0官网京东小程序官网
