这是一个创建于 702 天前的主题，其中的信息可能已经有所发展或是发生改变。
看这么多人推荐 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
 |
1
fmbfmb 2023-01-23 14:03:40 +08:00
我还是喜欢用 xray 的 vision ，也是最新的协议
|
 |
2
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" ``` 这些包，导致打包的模块数量很多 |
4 |
4
WhateverYouLike 2023-01-23 15:05:07 +08:00 via Android
我之前因為他的日期選擇器比較好看，所以引入了 naive ui 。只用了那一個組件，打包後一兆左右
|
 |
5
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.05 kB 所以问题肯定不在这里 |
 |
6
elboble OP 这些
``` { "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" } } ``` |
 |
7
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
|
|
8
elboble OP 我又试了下，把 naive-ui 的都注释掉，只剩 vue ，pinia ，router ，axios ，打包出来大概是 80 多 k ，但是就加 NDataTable 一个表就 600 多 k 了。
vue-naive-admin 的 demo 打包出来最大一个 index 的包也就是 700 多 k ，那页应该有很多各种组件。TreeShaking 到底生效没，是按需打的吗？ |
 |
9
kaifang 2023-01-23 23:50:12 +08:00 via iPhone
可以提 issue 哈，年后我催下～负责维护的前端老哥
|
 |
10
UnluckyNinja 2023-01-25 07:59:40 +08:00 via Android
https://github.com/btd/rollup-plugin-visualizer
用的 vite 的话，试试这个？不过根据功能多少，有的组件本身就是很大，例如可编辑排序的表格、日期时间选择器、富文本编辑器…… |
 |
11
learningman 2023-01-25 17:19:41 +08:00
@sadfQED2 #3 应该是只看标题，然后看成 naive-proxy 了
|
|
12
elboble OP @UnluckyNinja 看了下，的确一个 datetimepicker 就包含了很多基础包，button ，message ，checkbox ，radio 等等，还有 datetime 相关的其他库，再就是 lodash 。
rollerup map 放这了，有 1M ，加载有点慢 http://[2001:41d0:2:b6c8::15d]/ |
Select Language