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下调用

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