NutUI 4.0 正式釋出！

京東雲開發者發表於2023-02-01
UI

作者: 京東零售 NutUI

NutUI

前言

技術日異月新、發展創新、持續的迭代已成為常態。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 進行了底層架構升級來支撐不斷加入的新功能，共建亦有全新體驗。

  1. 構建工具升級

    NutUI 4.0 將底層構建工具從 Vite 2 升級到 Vite 4，構建時間減少了 10 秒

  2. 庫型別宣告升級

    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。願大家在開源的道路上步履不停~

NutUI的開發者

大家在開發中遇到任何問題，可以在 GitHub 或咚咚交流群（82957939）與我們聯絡，或者郵件至 nutui@jd.com，也歡迎大家為 NutUI Star。

相關連結：

相關文章