TDesign-MiniProgram 按需引用优化指南

TDesign-MiniProgram 按需引用优化指南

【免费下载链接】tdesign-miniprogram A Wechat MiniProgram UI components lib for TDesign. 项目地址: https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram

背景介绍

TDesign-MiniProgram 作为腾讯开源的小程序组件库，在实际项目开发中可能会遇到打包体积过大的问题。当开发者发现打包后的组件库体积达到1MB时，往往会考虑如何通过按需引用来优化项目体积。

问题分析

在微信小程序开发中，默认情况下项目会完整引入 npm 包中的所有文件，这会导致以下问题：

1. 未使用的组件文件也被打包上传
2. 项目体积增大影响加载性能
3. 浪费用户的流量和存储空间

解决方案

配置 miniprogramNpmDistDir

首先需要确保项目正确配置了 npm 包的输出目录。在 project.config.json 文件中添加以下配置：

{
  "setting": {
    "miniprogramNpmDistDir": "./miniprogram_npm"
  }
}

这个配置告诉小程序构建工具从指定目录寻找 npm 包，而不是默认的 node_modules 目录。

启用上传过滤功能

关键的一步是启用上传时的文件过滤功能。在 project.config.json 中添加以下配置：

{
  "setting": {
    "ignoreUploadUnusedFiles": true
  }
}

这个配置会指示小程序构建工具在上传时自动过滤未被引用的文件，只上传实际使用到的组件和资源。

验证方法

为了确认优化效果，开发者可以使用以下方法验证：

1. 使用 miniprogram-ci 工具本地查看打包产物
2. 对比构建前后的文件大小差异
3. 检查上传后的实际体积

注意事项

1. 确保项目依赖的 TDesign 版本支持按需引用
2. 检查组件引用方式是否正确（推荐使用具体路径引用）
3. 定期清理构建缓存以避免旧文件残留

通过以上配置和优化，开发者可以显著减小 TDesign-MiniProgram 在小程序项目中的体积，提升应用性能。

【免费下载链接】tdesign-miniprogram A Wechat MiniProgram UI components lib for TDesign. 项目地址: https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram