V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
elboble
V2EX  ›  Vue.js

naive-ui 打包后的大小?

  •  
  •   elboble · 11 天前 · 1688 次点击

    看这么多人推荐 naive-ui ,这两天也学着用。

    vite+vue3+ts+naive-ui

    用了 naive-ui 两个组件,打包后就有 600K 了,这是正常的吗?

    按道理应该是手动按需引入,但是编译的时候跑了 2000 多个包,

    2475 modules transformed.
    
    //TheSongsTable.vue
    import { NDataTable } from "naive-ui";
    import type { DataTableColumns } from "naive-ui";
    import { reactive, ref, watch } from "vue";
    import { getAccessListByPost, getAccessListLocationByIP } from "../utils/api";
    
    //ContentView.vue
    import { NMessageProvider, NDatePicker } from "naive-ui";
    import TheSongsTable from "../components/TheSongsTable.vue";
    import { ref } from "vue";
    
    dist/assets/ContentView-3c68ce25.js  686.74 kB │ gzip: 174.00 kB
    
    (!) Some chunks are larger than 500 kBs after minification. Consider:
    ...
    
    第 1 条附言  ·  8 天前

    看了下,的确一个 datetimepicker 就包含了很多基础包,button ,message ,checkbox ,radio 等等,还有 datetime 相关的其他库,再就是 lodash 。

    rollerup map 放这了,有 1M ,加载有点慢 http://[2001:41d0:2:b6c8::15d]/index.html

    14 条回复    2023-02-03 17:04:42 +08:00
    fmbfmb
        1
    fmbfmb  
       11 天前
    我还是喜欢用 xray 的 vision ,也是最新的协议
    lisongeee
        2
    lisongeee  
       11 天前
    应该是 naive-ui 还引用了

    ```txt
    "@css-render/plugin-bem": "^0.15.10",
    "@css-render/vue3-ssr": "^0.15.10",
    "@types/katex": "^0.14.0",
    "@types/lodash": "^4.14.181",
    "@types/lodash-es": "^4.17.6",
    "async-validator": "^4.0.7",
    "css-render": "^0.15.10",
    "date-fns": "^2.28.0",
    "date-fns-tz": "^1.3.3",
    "evtd": "^0.2.4",
    "highlight.js": "^11.5.0",
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "seemly": "^0.3.6",
    "treemate": "^0.3.11",
    "vdirs": "^0.1.8",
    "vooks": "^0.2.12",
    "vueuc": "^0.4.47"
    ```

    这些包,导致打包的模块数量很多
    sadfQED2
        3
    sadfQED2  
       11 天前 via Android   ❤️ 4
    @fmbfmb 一时间给我整蒙了,可谓问牛答马的典范
    WhateverYouLike
        4
    WhateverYouLike  
       11 天前 via Android
    我之前因為他的日期選擇器比較好看,所以引入了 naive ui 。只用了那一個組件,打包後一兆左右
    luob
        5
    luob  
       11 天前
    vue-ts hello-world 模板
    54.27 kB │ gzip: 21.91 kB

    从官网的示例抄了 NDataTable, DataTableColumns, NButton, NMessageProvider, NDatePicker 这些组件
    116.22 kB │ gzip: 41.05 kB

    所以问题肯定不在这里
    elboble
        6
    elboble  
    OP
       11 天前
    这些
    ```
    {
    "name": "vue-project",
    "version": "0.0.0",
    "private": true,
    "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
    },
    "dependencies": {
    "axios": "^1.2.2",
    "pinia": "^2.0.28",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
    },
    "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^18.11.12",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "naive-ui": "^2.34.3",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "typescript": "~4.7.4",
    "vfonts": "^0.0.3",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.12"
    }
    }
    ```
    licoycn
        7
    licoycn  
       11 天前
    我的主题的配置框架也是基于 naive ui 的,打包出来也有 1.2m ,如果有减少体积的办法就好了: https://github.com/Licoy/wordpress-theme-puock/blob/master/assets/dist/setting/index.js
    elboble
        8
    elboble  
    OP
       11 天前
    我又试了下,把 naive-ui 的都注释掉,只剩 vue ,pinia ,router ,axios ,打包出来大概是 80 多 k ,但是就加 NDataTable 一个表就 600 多 k 了。

    vue-naive-admin 的 demo 打包出来最大一个 index 的包也就是 700 多 k ,那页应该有很多各种组件。TreeShaking 到底生效没,是按需打的吗?
    kaifang
        9
    kaifang  
       11 天前 via iPhone
    可以提 issue 哈,年后我催下~负责维护的前端老哥
    UnluckyNinja
        10
    UnluckyNinja  
       9 天前 via Android
    https://github.com/btd/rollup-plugin-visualizer
    用的 vite 的话,试试这个?不过根据功能多少,有的组件本身就是很大,例如可编辑排序的表格、日期时间选择器、富文本编辑器……
    learningman
        11
    learningman  
       9 天前
    @sadfQED2 #3 应该是只看标题,然后看成 naive-proxy 了
    elboble
        12
    elboble  
    OP
       8 天前
    @UnluckyNinja 看了下,的确一个 datetimepicker 就包含了很多基础包,button ,message ,checkbox ,radio 等等,还有 datetime 相关的其他库,再就是 lodash 。

    rollerup map 放这了,有 1M ,加载有点慢
    http://[2001:41d0:2:b6c8::15d]/
    Jexxie
        13
    Jexxie  
       1 天前
    @elboble http://[2001:41d0:2:b6c8::15d]/ 请教下,这地址怎么访问?
    elboble
        14
    elboble  
    OP
       8 小时 20 分钟前
    @Jexxie 如果你有 ipv6 的地址,浏览器直接访问就行了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   实用小工具   ·   805 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 228ms · UTC 17:24 · PVG 01:24 · LAX 09:24 · JFK 12:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.