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

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

****** 注意vue2和vue3之间的区别 ******

1.页面分包：
分包加载配置，此配置为小程序的分包加载机制。在App里始终为整包。

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

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

切记一条，如果你的项目是要实现tabBar底部导航的，tab的页面一定要放在pages下面，不能放分包下面去注册
到这里就完成了页面的分包操作

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

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

vue2

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

附上vue.config.js内容：

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

vue3

如果你使用的是vue3版本的uniapp，那么根目录下面会有个vite.config配置文件，无需再创建一个vue.config.js文件,直接在vite.config.js下配置import fs from ‘fs-extra’;插件。

附上vite.config.js内容：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
const path = require('path')
import fs from 'fs-extra';
function copyFile() {
	return {
		enforce: 'post',
		async writeBundle() {
			await fs.copy(
        path.join(__dirname, 'src/images/'),
        path.join(__dirname, '/dist/', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')
			);
		},
	};
}

export default defineConfig({
  plugins: [
    uni(),
    copyFile()
  ],
})

接下来在控制台输入 npm install copy-webpack-plugin添加插件到自己的项目下。
如果你用的不是vsCode,就根据箭头的位置修改你对应的文件目录路径。
接下来我们可以在开发工具上查看到，图片已经打包到分包下了，图片分包就搞定了。

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

结束语： 可加微信进学习互帮互助群 Benjamin19950304