uni-app小程序超2M分包加载

uni-app如何分包:

微信官方要求小程序单包不能超过2M/主包,整包不能超8M,如果我们不做分包处理是无法正常上传到微信平台的,所以这里我针对做了以下分包。

1.页面分包

分包加载配置,此配置为小程序的分包加载机制。在App里始终为整包。

我用的开发工具是vsCode,所以按照最后面的方案配置,找到根目录下的package.json文件,在build:mp-weixin 添加"–minimize"参数,如下图:

然后找到根目录下的pages.json配置你的分包,如下图:

切记一条,如果你的项目是要实现tabBar底部导航的,tab的页面一定要放在pages下面,不能放分包下面去注册

到这里就完成了页面的分包操作

2.图片分包

如果我们图片放在根目录的static下面的话,打包的时候是直接打包到我们的主包下面,这样主包的负荷就会非常大,我们项目相对大一点的时候,图片也是非常占据资源的,所以这里也做一个分包处理。

先创建一个图片文件夹,命名按需求,图片下面的分包图片必须和你分包的页面名称一致,如下图:

接下来配置图片的打包设置,先在根目录下创建一个vue.config.js文件,如下图:

附上vue.config.js内容:

const path = require('path')

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

module.exports = {

  configureWebpack: {

    plugins: [

      new CopyWebpackPlugin([

        {

          from: path.join(__dirname, '/src/images'),

          to: path.join(__dirname + '/dist/', process.env.NODE_ENV === 'production' ? 'build' :                    'dev', process.env.UNI_PLATFORM, '/')

        }

      ])

    ]

  }

}

接下来在控制台输入 npm install copy-webpack-plugin添加插件到自己的项目下。

如果你用的不是vsCode,就根据箭头的位置修改你对应的文件目录路径。

接下来我们可以在开发工具上查看到,图片已经打包到分包下了,图片分包就搞定了。

补充一下,如果通用的图片,建议直接放根目录的static下调用

如不明白,需要源码可以联系笔者,不足之处,还望指教

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。