@uni-ku/bundle-optimizer v1.2.6

@uni-ku/bundle-optimizer

!TIP uni-app 分包优化插件化实现

前往 https://github.com/dcloudio/uni-app/issues/5025 查看本项目立项背景。

前往 https://github.com/Vanisper/uniapp-bundle-optimizer 查看本插件详细发展过程与提交记录。

🎏 功能与支持

！暂时没有对App平台做兼容性实现

适用于 Uniapp - CLI 或 HBuilderX 创建的 Vue3 项目

• 分包优化
• 模块异步跨包调用
• 组件异步跨包引用

📦 安装

pnpm add -D @uni-ku/bundle-optimizer

🚀 使用

0. 插件可配置参数

！以下各参数均为可选参数，默认开启所有插件功能，并在项目根目录下生成async-import.d.ts与async-component.d.ts文件

1. 引入 @uni-ku/bundle-optimizer

• CLI: 直接编写 根目录下的 vite.config.*
• HBuilderX: 需要根据你所使用语言, 在根目录下 创建 vite.config.*

简单配置：

// vite.config.*
import Uni from '@dcloudio/vite-plugin-uni'
import Optimization from '@uni-ku/bundle-optimizer'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Uni(),
    Optimization({
      enable: {
        'optimization': true,
        'async-import': true,
        'async-component': true,
      },
      dts: {
        enable: true,
        base: './',
      },
      logger: true,
    }),
  ],
})

详细配置说明

// vite.config.*
import Uni from '@dcloudio/vite-plugin-uni'
import Optimization from '@uni-ku/bundle-optimizer'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Uni(),
    // 可以无需传递任何参数，默认开启所有插件功能，并在项目根目录生成类型定义文件
    Optimization({
      // 插件功能开关，默认为true，即开启所有功能
      enable: {
        'optimization': true,
        'async-import': true,
        'async-component': true,
      },
      // dts文件输出配置，默认为true，即在项目根目录生成类型定义文件
      dts: {
        'enable': true,
        'base': './',
        // 上面是对类型生成的比较全局的一个配置
        // 下面是对每个类型生成的配置，以下各配置均为可选参数
        'async-import': {
          enable: true,
          base: './',
          name: 'async-import.d.ts',
          path: './async-import.d.ts',
        },
        'async-component': {
          enable: true,
          base: './',
          name: 'async-component.d.ts',
          path: './async-component.d.ts',
        },
      },
      // 也可以传递具体的子插件的字符串列表，如 ['optimization', 'async-import', 'async-component']，开启部分插件的log功能
      logger: true,
    }),
  ],
})

2. 修改 manifest.json

需要修改 manifest.json 中的 mp-weixin.optimization.subPackages 配置项为 true，开启方法与vue2版本的uniapp一致。

{
  "mp-weixin": {
    "optimization": {
      "subPackages": true
    }
  }
}

使用了 @uni-helper/vite-plugin-uni-manifest 的项目，修改 manifest.config.ts 的对应配置项即可。

3. 将插件生成的类型标注文件加入 tsconfig.json

插件运行时默认会在项目根目录下生成 async-import.d.ts 与 async-component.d.ts 两个类型标注文件，需要将其加入到 tsconfig.json 的 include 配置项中；如果有自定义dts生成路径，则根据实际情况填写。

当然，如果原来的配置已经覆盖到了这两个文件，就可以不加；如果没有运行项目的时候，这两个文件不会生成。

{
  "include": [
    "async-import.d.ts",
    "async-component.d.ts"
  ]
}

• async-import.d.ts：定义了 AsyncImport 这个异步函数，用于异步引入模块。
• async-component.d.ts：拓展了 import 的 静态引入，引入路径后面加上?async即可实现小程序端的组件异步引用。
• 详见 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html

这两个类型文件不会对项目的运行产生任何影响，只是为了让编辑器能够正确的识别本插件定义的自定义语法、类型。

这两个文件可以加入到 .gitignore 中，不需要提交到代码仓库。

✨ 例子

以下例子均以CLI创建项目为例, HBuilderX 项目与以上设置同理 , 只要注意是否需要包含 src目录 即可。

现在已经支持 hbx 创建的 vue3 + vite、不以 src 为主要代码目录的项目。

🔗 查看以下例子的完整项目

分包优化 是本插件运行时默认开启的功能，无需额外配置，只需要确认 manifest.json 中的 mp-weixin.optimization.subPackages 配置项为 true 即可。

详情见本文档中的 使用 部分。

• 模块异步跨包调用 是指在一个分包中引用另一个分包中的模块（不限主包与分包），这里的模块可以是 js/ts 模块(插件)、vue 文件。当然，引入 vue 文件一般是没有什么意义的，但是也做了兼容处理。
• TODO: 是否支持 json 文件？

可以使用函数 AsyncImport 这个异步函数来实现模块的异步引入。

// js/ts 模块(插件) 异步引入
await AsyncImport('@/pages-sub-async/async-plugin/index').then((res) => {
  console.log(res?.AsyncPlugin()) // 该插件导出了一个具名函数
})

// vue 文件 异步引入（页面文件）
AsyncImport('@/pages-sub-async/index.vue').then((res) => {
  console.log(res.default || res)
})

// vue 文件 异步引入（组件文件）
AsyncImport('@/pages-sub-async/async-component/index.vue').then((res) => {
  console.log(res.default || res)
})

• 组件异步跨包引用 是指在一个分包中引用另一个分包中的组件（不限主包与分包），这里的组件就是 vue 文件；貌似支持把页面文件也作为组件引入。
• 在需要跨包引入的组件路径后面加上 ?async 即可实现异步引入。

<script setup>
import AsyncComponent from 'xxxxx.vue?async'
</script>

<template>
  <view>
    <AsyncComponent />
  </view>
</template>

🏝 周边

🧔 找到我

加我微信私聊，方便定位、解决问题。

💖 赞赏

如果我的工作帮助到了您，可以请我吃辣条，使我能量满满 ⚡

请留下您的Github用户名，感谢 ❤

直接赞助

赞赏榜单