简介
小程序主包体积优化终极解决方案，可将 uni-app 导出的小程序一级目录下的文件打入分包，从而减小主包体积。
使用
安装
在项目根目录下执行命令即可，安装 npm 包，
npm i subpackage-optimize
配置
1.在项目根目录下创建 vue.config.js 文件，已有此文件跳过即可
2.配置如下：
下方配置会把 components 目录下的子目录分别打包成分包
const UniPackageOptimization = require('subpackage-optimize');
const pro = process.env.NODE_ENV === 'production'; // 判断生产环境
module.exports = {
configureWebpack: config => {
// 微信小程序打包优化
// 需要其他平台小程序打包优化增加判断就可以了
if(process.env.UNI_PLATFORM === "mp-weixin" && pro) {
config.plugins.push(new UniPackageOptimization(['components'], []))
}
}
}
UniPackageOptimization 构造函数说明
UniPackageOptimization 接收两个参数
第一个参数是打入分包的一级目录数组
第二个参数是不打入分包的一级目录下的目录数组，第二个参数可以为空数组
UniPackageOptimization 说明中指的目录都是编译后文件的目录
3.配置 manifest.json 文件
- 在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化
- 目前只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-kuaishou的分包优化
- 例如下列配置：
"mp-weixin": {
"appid": "",
"usingComponents": true,
"optimization": {
// 开启分包优化
"subPackages": true
}
},
注意事项
1.如果被打入分包的组件中有 slot 插槽，请使用第二个参数将该组件目录从分包中剔除，否则可能会导致样式错乱，比如弹窗组件就不建议打入分包中
2.打入分包的目录下必须有 .vue 文件
