1.2.6 • Published 8 months ago

@uni-ku/bundle-optimizer v1.2.6

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

@uni-ku/bundle-optimizer

NPM downloads LICENSE

!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.tsasync-component.d.ts文件

参数-enable类型默认值描述
enableboolean|objecttrue插件功能总开关,object时可详细配置各插件启闭状态,详见下列
enable.optimizationbooleantrue分包优化启闭状态
enable'async-import'booleantrue模块异步跨包调用启闭状态
enable'async-component'booleantrue组件异步跨包引用启闭状态
参数-dts类型默认值描述
dtsboolean|objecttruedts文件输出总配置,true时按照下列各配置的默认参数来(根目录下生成async-import.d.tsasync-component.d.ts文件),object时可详细配置各类型文件的生成,详见下列
dts.enablebooleantrue总配置,是否生成dts文件
dts.basestring./总配置,dts文件输出目录,可相对路径,也可绝对路径
dts'async-import'boolean|objecttrueasync-importdts文件配置,默认为true(在项目根目录生成async-import.d.ts文件),object时可详细配置该项的生成
dts'async-import'.enablebooleantrue是否生成dts文件
dts'async-import'.basestring./dts文件输出目录,可相对路径,也可绝对路径
dts'async-import'.namestringasync-import.d.tsdts文件名称,需要包含文件后缀
dts'async-import'.pathstring${base}/${name}dts文件输出路径,如果没有定义此项则会是${base}/${name},否则此配置项优先级更高,可相对路径,也可绝对路径
dts'async-component'boolean|objecttrueasync-componentdts文件配置,默认为true(在项目根目录生成async-component.d.ts文件),object时可详细配置该项的生成
dts'async-component'.enablebooleantrue是否生成dts文件
dts'async-component'.basestring./dts文件输出目录,可相对路径,也可绝对路径
dts'async-component'.namestringasync-component.d.tsdts文件名称,需要包含文件后缀
dts'async-component'.pathstring${base}/${name}dts文件输出路径,如果没有定义此项则会是${base}/${name},否则此配置项优先级更高,可相对路径,也可绝对路径
参数-logger类型默认值描述
loggerboolean|string[]false插件日志输出总配置,true时启用所有子插件的日志功能;string[]时可具体启用部分插件的日志,可以是optimizationasync-componentasync-import

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.tsasync-component.d.ts 两个类型标注文件,需要将其加入到 tsconfig.jsoninclude 配置项中;如果有自定义dts生成路径,则根据实际情况填写。

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

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

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

这两个文件可以加入到 .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>

🏝 周边

项目描述
Uni Ku有很多 Uniapp(Uni) 的酷(Ku) 😎
create-uni🛠️ 快速创建uni-app项目
Wot Design Uni一个基于Vue3+TS开发的uni-app组件库,提供70+高质量组件

🧔 找到我

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

💖 赞赏

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

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

直接赞助

赞赏榜单


1.2.6

8 months ago

1.2.5

8 months ago

1.2.4

8 months ago

1.2.3

9 months ago

1.2.2

9 months ago

1.2.0

10 months ago

1.2.1

10 months ago

1.1.5

10 months ago

1.1.4

10 months ago

1.1.3

10 months ago

1.1.1

10 months ago

1.1.0

10 months ago

1.1.2

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago