uniapp中微信小程序分包策略

引言

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

实现

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

2.存放格式uniapp中微信小程序分包策略_第1张图片
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过大的情况可以使用运行时压缩代码
uniapp中微信小程序分包策略_第2张图片
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.打包上传

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

你可能感兴趣的:(uni-app,小程序,vue.js)