简介

小程序主包体积优化终极解决方案，可将 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 文件

npm地址
github地址