当前位置：首页 > uni-app

uniapp多文件打包

2026-02-06 13:38:16uni-app

多文件打包配置方法

在UniApp中实现多文件打包需要配置manifest.json文件，通过设置networkTimeout和optimization选项来优化打包过程。修改manifest.json的"mp-weixin"字段，添加以下配置：

"networkTimeout": {
  "request": 60000,
  "connectSocket": 60000,
  "uploadFile": 60000,
  "downloadFile": 60000
},
"optimization": {
  "subPackages": true
}

分包加载设置

对于大型项目，使用分包加载能显著提升性能。在项目根目录创建subPackages目录，并在pages.json中配置分包信息：

"subPackages": [
  {
    "root": "subPackages/moduleA",
    "pages": [
      {"path": "page1", "style": {}},
      {"path": "page2", "style": {}}
    ]
  }
]

静态资源处理

静态资源需根据使用频率进行分类。高频资源放在主包static目录，低频资源放入分包目录。修改vue.config.js配置资源路径：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => ({
        ...options,
        limit: 10240
      }))
  }
}

自定义组件优化

将通用组件放在主包components目录，业务专用组件放入各自分包。在pages.json中配置组件自动引入：

"easycom": {
  "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}

构建命令配置

在package.json中添加多环境打包命令，通过--mode参数指定环境：

"scripts": {
  "build:prod": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
  "build:test": "cross-env NODE_ENV=test UNI_PLATFORM=mp-weixin vue-cli-service uni-build"
}

云函数打包方案

如需打包云函数，在项目根目录创建cloudfunctions目录。配置manifest.json：

"mp-weixin": {
  "cloudfunctionRoot": "cloudfunctions/"
}

体积监控与优化

安装webpack-bundle-analyzer分析包体积：

npm install webpack-bundle-analyzer --save-dev

在vue.config.js中添加分析插件：

uniapp多文件打包

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
}