uniapp中微信小程序分包策略

引言

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

实现

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

2.存放格式
image文件夹下存放的为相应模块下的静态图片，公共图片依旧放在默认static文件夹内。

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

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过大的情况可以使用运行时压缩代码

5.对于项目中图片的处理：仅指存放在分包下的静态文件

• 
• //#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.打包上传

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