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下调用
如不明白,需要源码可以联系笔者,不足之处,还望指教