naive-ui 打包后的大小？

› Vue.js

This topic created in 1210 days ago, the information mentioned may be changed or developed.

看这么多人推荐 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:
...

Supplement 1 · Jan 26, 2023

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

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

14 replies • 2023-02-03 17:04:42 +08:00

fmbfmb

Jan 23, 2023

我还是喜欢用 xray 的 vision ，也是最新的协议

lisongeee

Jan 23, 2023

应该是 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

Jan 23, 2023 via Android

@fmbfmb 一时间给我整蒙了，可谓问牛答马的典范

Jaufey

Jan 23, 2023 via Android

我之前因為他的日期選擇器比較好看，所以引入了 naive ui 。只用了那一個組件，打包後一兆左右

luob

Jan 23, 2023

vue-ts hello-world 模板
54.27 kB │ gzip: 21.91 kB

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

所以问题肯定不在这里

elboble

Jan 23, 2023

这些
```
{
"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

Jan 23, 2023

我的主题的配置框架也是基于 naive ui 的，打包出来也有 1.2m ，如果有减少体积的办法就好了： https://github.com/Licoy/wordpress-theme-puock/blob/master/assets/dist/setting/index.js

elboble

Jan 23, 2023

我又试了下，把 naive-ui 的都注释掉，只剩 vue ，pinia ，router ，axios ，打包出来大概是 80 多 k ，但是就加 NDataTable 一个表就 600 多 k 了。

vue-naive-admin 的 demo 打包出来最大一个 index 的包也就是 700 多 k ，那页应该有很多各种组件。TreeShaking 到底生效没，是按需打的吗？

kaifang

Jan 23, 2023 via iPhone

可以提 issue 哈，年后我催下～负责维护的前端老哥

UnluckyNinja

Jan 25, 2023 via Android

https://github.com/btd/rollup-plugin-visualizer
用的 vite 的话，试试这个？不过根据功能多少，有的组件本身就是很大，例如可编辑排序的表格、日期时间选择器、富文本编辑器……

learningman

Jan 25, 2023

@sadfQED2 #3 应该是只看标题，然后看成 naive-proxy 了

elboble

Jan 26, 2023

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

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

Jexxie

Feb 2, 2023

@elboble http://[2001:41d0:2:b6c8::15d]/ 请教下，这地址怎么访问？

elboble

Feb 3, 2023

@Jexxie 如果你有 ipv6 的地址，浏览器直接访问就行了。