uniapp中微信小程序分包策略

我会带着你远行 2022-11-11 05:11 424阅读 0赞

## 引言 ##

*用uniapp开发调试微信小程序时，随着项目的体积越来越大，导致无法将代码上传小程序。根本上是因小程序有体积和资源加载限制：  
微信小程序每个分包的大小是2M，总体积一共不能超过20M。*

## 实现 ##

1.[对已有项目模块进行分包][Link 1]

2.**存放格式**![在这里插入图片描述][20210319102951135.png_pic_center]  
image文件夹下存放的为相应模块下的静态图片，公共图片依旧放在默认static文件夹内。

3.配置图片拷贝地址，在根目录下新建vue.config.js文件，内容如下：（需要先执行：npm install -save copy-webpack-plugin@5.1.1  
）

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

4.针对vendor.js过大的情况可以使用运行时压缩代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzkyODQy_size_16_color_FFFFFF_t_70_pic_center]  
5.对于项目中图片的处理：`仅指存放在分包下的静态文件`

*  `<image src="/pages/admin/wjdc.png" ></image>`
 *  `//#ifdef H5 background-image: url('/pages/admin/background.png'); //#endif //#ifndef H5 background-image: url('/image/pages/admin/background.png'); //#endif`  
    如果background-image依旧无效建议使用base64

6.打包上传

**以上为笔者的浅知，如有不对，欢迎指正**

[Link 1]: https://uniapp.dcloud.net.cn/collocation/pages?id=subpackages
[20210319102951135.png_pic_center]: /images/20221022/cfe7d8904ae04fe5afa516e74d1ca414.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzkyODQy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/e451bb48a8e345bfa3cd004331b30d00.png