uniapp小程序分包加载优化，图片分包记录

最新推荐文章于 2025-05-27 11:42:56 发布

LLL_LH

最新推荐文章于 2025-05-27 11:42:56 发布

阅读量6.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： uniapp

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/111151059

uniapp 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了解决小程序因体积过大导致无法上传的问题的方法，包括页面分包、图片分包等技术细节，并提供了具体实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为小程序的大小有限制，单包不能超过2M,整包不能超过16M，如果小程序太大，不做分包处理的话就无法上传成功。

1、页面分包

详情查看https://uniapp.dcloud.io/collocation/pages?id=subpackages

如果分包的自定义组件只有分包里面才使用，那么这个组件文件夹可以放到分包里面，这样打包的时候就不会分包到主包里。tabBar的页面必须放在主包里。

2、根据目录再pages.json

注意：写在subPackages里面的pages的路径就不能写在pages里面了。

在HBuilderX中文件manifest.json中选择源码视图，找到mp-weixin添加“optimization”:{"subPackages":true}开启分包优化

3、图片的分包，因为static默认是被打包到主包的，如果图片比较多的话，也是会占用很多资源的，所以如果图片最好也做分包，可以放在新建的文件夹，比如images。

images文件夹下新建文件夹dataView、pages、personal,这几个文件夹的名字要和分包的文件夹一样，然后再images对应的分包文件夹下面在新建一个img文件夹放图片

然后再根目录下新建vue.config.js

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.join(__dirname, '/images'),
          to: path.join(__dirname+'/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')
        }
      ])
    ]
  }
}

在根目录下命令行输入

npm install copy-webpack-plugin --save-dev

分包内代码引用图片

<image src="/分包名称/img/图片名称"></image>
<image src="/dataView/img/图片名称"></image>

图片分包的另一个方法:

在对应分包目录下新建static目录，然后将图片放到static目录下，这样也会把静态文件直接打包到分包内。