【uniapp】解决小程序分包下的json文件编译后生成到主包的问题

前言

目前,小程序端,分包引用分包下的json文件编译后会生成到主包中。这对于主包体积紧张的开发者不太友好

下面分享两种解决方案

方案一

把 json 文件改成 js 文件,通过 export default 导出,manifest.json 中指定的小程序节点(比如mp-weixin)需要配置

json 复制代码
"optimization": {  
  "subPackages": true  
}

方案二

使用 @uni_toolkit/unplugin-json-optimization 插件

安装

bash 复制代码
# npm
npm install @uni_toolkit/unplugin-json-optimization -D

# yarn
yarn add @uni_toolkit/unplugin-json-optimization -D

# pnpm
pnpm add @uni_toolkit/unplugin-json-optimization -D

使用

ts 复制代码
// vite.config.js
import { defineConfig } from 'vite'
import uni from "@dcloudio/vite-plugin-uni"
import jsonOptimization from '@uni_toolkit/unplugin-json-optimization/vite'

export default defineConfig({
  plugins: [
    uni(),
    jsonOptimization(),
  ],
})

重新运行测试一下,js文件被编译到了分包中

结语

如果这个库的插件帮助到了你,可以点个 star✨ 鼓励一下。

如果你有什么好的想法或者建议,欢迎在 https://github.com/uni-toolkit/uni-toolkit 提 issue 或者 pr

相关推荐
茶憶2 小时前
uniapp移动端实现触摸滑动功能:上下滑动展开收起内容,左右滑动删除列表
前端·javascript·vue.js·uni-app
蒲公英源码2 小时前
uniapp开源ERP多仓库管理系统
mysql·elementui·uni-app·php
shykevin2 小时前
uni-app x开发商城系统,小程序发布,h5发布,安卓打包
android·小程序·uni-app
且白2 小时前
uniapp接入安卓端极光推送离线打包
android·uni-app
Ayn慢慢2 小时前
uni-app PDA焦点录入实现
前端·javascript·uni-app
一位搞嵌入式的 genius2 小时前
微前端架构:JavaScript 隔离方案全解析(含 CSS 隔离)概要
前端·css·前端实战
4_0_42 小时前
一步一步实现 Shader 水波纹效果(入门到进阶)
前端·three.js
lemonboy2 小时前
可视化大屏适配方案:用 Tailwind CSS 直接写设计稿像素值
前端·vue.js
鹏仔工作室2 小时前
vue中实现1小时不操作则退出登录功能
前端·javascript·vue.js