npm下载的依赖编译到微信小程序占用主包大小，如何将依赖打入分包

该问题请在专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

uni-app 把 npm 依赖“只打进分包”的核心思路是：

1. 让依赖只在分包代码里被引用；
2. 借助 uni-app 的“分包优化”能力，把 npm 模块也当作普通 js 资源一起拆出去。
   下面给出在微信小程序端可落地的完整步骤。

1. 目录与分包规划
   假设依赖只在 pagesA 这个分包使用：

project
├─ pages/…（主包页面）
├─ pagesA/ ← 分包根目录
│ ├─ pages/… ← 分包页面
│ └─ utils/ ← 可把依赖封装到这里
├─ static/…
└─ pages.json

1. 在 pages.json 中声明分包

{  
  "subPackages": [  
    {  
      "root": "pagesA",  
      "pages": [  
        { "path": "pages/list/list", "style": { ... } }  
      ]  
    }  
  ],  
  "preloadRule": {  
    "pagesA/pages/list/list": {  
      "network": "all",  
      "packages": ["pagesA"]  
    }  
  }  
}

1. 打开“分包优化”开关
   HBuilderX：manifest.json → 源码视图 → 新增

"mp-weixin": {  
  "optimization": {  
    "subPackages": true  
  }  
}

CLI：vue.config.js（或 uniapp 自动生成的 webpack 配置）里加

module.exports = {  
  chainWebpack: config => {  
    config.optimization.splitChunks({  
      chunks: 'all',  
      cacheGroups: {  
        vendor: false   // 关闭默认 vendor 打到主包  
      }  
    })  
  }  
}

1. 使用依赖时只让分包引用
   在分包页面 / 组件 / utils 里正常 import：

// pagesA/utils/request.js  
import axios from 'axios'  
export default axios.create({ ... })

主包任何文件都不要 import 'axios'。
如果主包也要用，则只能接受它留在主包。

1. 验证

   • 运行 → 运行到小程序模拟器 → 勾选“运行时压缩代码”。
   • 打开微信开发者工具 → 详情 → 代码依赖分析，可看到 axios 等模块已出现在 pagesA 分包的 chunk 中，主包 vendor.js 明显减小。

2. 特殊情况处理

   • 同一个依赖被两个及以上分包引用：
     默认会提升到主包。若仍想留在分包，可给每个分包各写一份轻量封装，避免“多处引用”。
   • 组件库（如 uview-plus）体积大：
     把组件库也放到分包目录，再按需引用；或者使用“按需加载 babel-plugin-import”。

3. 构建命令（CLI 用户）

npm run build:mp-weixin -- --subpackage=pagesA

这样只会生成 pagesA 分包代码，拷贝到已有原生小程序即可。

按以上步骤即可让 npm 依赖只占用对应分包体积，主包不再膨胀。

cli 项目升级到最新的 alpha 版本，哪些是分包用到的依赖，就在分包根目录搞个 node_modules；hx 项目在 5.0 alpha 会支持

需要开启分包优化 optimization: { subPackages: true }