组件是否支持按需加载？

lambortao commented 2 years ago

我的 package.json 配置如下

{
 "dependencies": {
    "@ant-design-vue/pro-layout": "^3.1.0",
    "ant-design-vue": "^2.2.8",
    "axios": "^0.21.4",
    "core-js": "^3.18.1",
    "dayjs": "^1.10.7",
    "lodash": "^4.17.21",
    "md5": "^2.3.0",
    "vue": "^3.2.19",
    "vue-i18n": "^9.2.0-beta.9",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "antd-dayjs-webpack-plugin": "^1.0.6",
    "babel-plugin-import": "^1.13.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "typescript": "~4.1.5"
  }
}

我碰到的问题是在引用以下组件的时候，打包后代码包 ant-design-vue 有 3MB，其实我只引入了两个组件。。。

然后代码包中还出现了 icon-svg 和 icon-vue 统计 1.8MB 的文件，看源是 @ant-design/icons-vue 和 @ant-design/icons-svg，但是我为了减少打包体积并没有引入这个包，如果是咱们这个库中依赖的图标库的话能否做按需引入？


import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout';

app.use(ProLayout);
app.use(PageContainer);

这是加载 @ant-design-vue/pro-layout 后打包。

这是加载前打包

我尝试使用 babel-plugin-import 去进行按需加载，.babelrc 的配置如下

{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "style": "css" }, "antd"],
    ["import", { "libraryName": "@ant-design-vue/pro-layout", "libraryDirectory": "dist" }, "pro-layout"]
  ]
}

但是命令行报错在dist目录下没有找到对应文件，然后查看 node_modules 内确实没有该文件。

sendya commented 2 years ago

本项目已经全部都是按需引入了，本项目 gzip 后大小大约 68KB 的，你可以直接从 https://unpkg.com/browse/@ant-design-vue/pro-layout@3.1.0/dist/ 查看到原始大小。

在引入 ProLayout + Card, Result, Button, Dropdown, Menu, Avatar, message 组件下， gzip 也才 200KB 左右

项目导出提供了 es 和 umd 两种方式， ES 是自动按需引入的，不需要做任何配置，请自行确认你的开发环境是否有问题

lambortao commented 2 years ago

感谢回复，找到问题了。

错把 .env.production 的 NODE_ENV写成 development 了。

vueComponent / pro-components

组件是否支持按需加载？ #157