naive-ui 打包后的大小？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Vue.js

这是一个创建于 994 天前的主题，其中的信息可能已经有所发展或是发生改变。

看这么多人推荐 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 条附言 2023-01-26 17:46:40 +08:00

看了下，的确一个 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

2023-01-23 14:03:40 +08:00

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

lisongeee

2023-01-23 14:08:57 +08:00

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

2023-01-23 14:57:17 +08:00 via Android

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

WhateverYouLike

2023-01-23 15:05:07 +08:00 via Android

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

luob

2023-01-23 15:26:36 +08:00

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

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

所以问题肯定不在这里

elboble

2023-01-23 16:54:20 +08:00

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

2023-01-23 18:10:16 +08:00

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

elboble

2023-01-23 20:32:04 +08:00

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

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

kaifang

2023-01-23 23:50:12 +08:00 via iPhone

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

UnluckyNinja

2023-01-25 07:59:40 +08:00 via Android

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

learningman

2023-01-25 17:19:41 +08:00

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

elboble

2023-01-26 17:38:06 +08:00

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

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

Jexxie

2023-02-02 16:56:05 +08:00

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

elboble

2023-02-03 17:04:42 +08:00

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