「前端」关闭源码依赖

问题背景

在 5.x 版本的 oinone 前端架构中,我们开放了部分源码,但是导致以下性能问题:

1.构建耗时增加​​:Webpack 需要编译源码文件

2.​​加载性能下降​​:页面需加载全部编译产物

3.​​冷启动缓慢​​:开发服务器启动时间延长

以下方案通过关闭源码依赖。

操作步骤

1. 添加路径修正脚本

1: 在当前项目工程根目录中的scripts目录添加patch-package-entry.js脚本,内容如下:

const fs = require('fs');
const path = require('path');

const targetPackages = [
  '@kunlun+vue-admin-base',
  '@kunlun+vue-admin-layout',
  '@kunlun+vue-router',
  '@kunlun+vue-ui',
  '@kunlun+vue-ui-antd',
  '@kunlun+vue-ui-common',
  '@kunlun+vue-ui-el',
  '@kunlun+vue-widget'
];

// 递归查找目标包的 package.json
function findPackageJson(rootDir, pkgName) {
  const entries = fs.readdirSync(rootDir);
  for (const entry of entries) {
    const entryPath = path.join(rootDir, entry);
    const stat = fs.statSync(entryPath);
    if (stat.isDirectory()) {
      if (entry.startsWith(pkgName)) {
        const [pkGroupName, name] = pkgName.split('+');
        const pkgDir = path.join(entryPath, 'node_modules', pkGroupName, name);
        const pkgJsonPath = path.join(pkgDir, 'package.json');
        if (fs.existsSync(pkgJsonPath)) {
          return pkgJsonPath;
        }
      }
      // 递归查找子目录
      const found = findPackageJson(entryPath, pkgName);
      if (found) return found;
    }
  }
  return null;
}

// 从 node_modules/.pnpm 开始查找
const pnpmDir = path.join(__dirname, '../', 'node_modules', '.pnpm');

for (const pkgName of targetPackages) {
  const packageJsonPath = findPackageJson(pnpmDir, pkgName);

  if (packageJsonPath) {
    try {
      const packageJSON = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
      if (packageJSON.main === 'index.ts') {
        const libName = packageJSON.name.replace('@', '').replace('/', '-');
        packageJSON.main = `dist/${libName}.esm.js`;
        packageJSON.module = `dist/${libName}.esm.js`;
        const typings = 'dist/types/index.d.ts';
        packageJSON.typings = typings;
        const [pwd] = packageJsonPath.split('package.json');
        const typingsUrl = path.resolve(pwd, typings);
        const dir = fs.existsSync(typingsUrl);
        if (!dir) {
          packageJSON.typings = 'dist/index.d.ts';
        }
        packageJSON.files = ['dist'];
        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJSON, null, 2));
      }
    } catch (err) {
      process.exit(1);
    }
  }
}

2. 配置自动执行钩子

{
  "scripts": {
    "postinstall": "node ./scripts/patch-package-entry.js"
  }
}

脚本作用说明​​:postinstall 是 npm/pnpm 的生命周期钩子,会在每次执行 npm install 或 pnpm install 后自动触发,确保依赖更新后入口配置保持正确。

3. 重新安装依赖

pnpm install

Oinone社区 作者:汤乾华原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/20960.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
汤乾华的头像汤乾华数式员工
上一篇 2025年4月17日 pm4:20
下一篇 2025年4月21日 am9:49

相关推荐

  • 列表页内上下文无关的动作如何添加自定义上下文

    场景 在界面设计器,可以配置当前列表页从上个页面带的上下文参数,现在需要传递这个上下文到下个页面,设计器没有配置入口,我们可以通过自定义改动作来解决 示例代码 import { ActionType, ActionWidget, RouterViewActionWidget, SPI, ViewActionTarget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Router], // 模型编码 model: 'module.model', // 动作名称 name: 'actionName' }) ) export class DemoRouterViewActionWidget extends RouterViewActionWidget { protected async clickAction(): Promise<void> { // initialContext内是上个页面传来的上下文,手动将值传递到下个页面的上下文 // 这里假设需要传递的字段名为type this.action.context = { type: this.initialContext.type }; return super.clickAction(); } }

    2024年8月20日
    1.0K00
  • 前端打包文件上传到oss

    打包dist文件上传到oss教程 1: 确保boot工程里面安装了「webpack-aliyun-oss」依赖, 如果没有安装,可以手动安装下 2: package.json -> devDependencies -> {"webpack-aliyun-oss": "0.5.2"} 3: 在vue.config.js文件中添加对应的plugin // vue.config.js文件 // 新增代码 let BASE_URL = '/'; const { DEPLOY, OSS_REGION, OSS_DIST, OSS_URL, OSS_ACCESS_KEY_ID, OSS_ACCESS_KEY_SECRET, OSS_BUCKET } = process.env; const UNIQUE_KEY = Math.random(); switch (DEPLOY) { case 'online': BASE_URL = `${OSS_URL}${UNIQUE_KEY}/`; break; default: BASE_URL = '/'; } module.exports = { …原先的代码, publicPath: BASE_URL, plugins: [ …原先的插件, DEPLOY === 'online' ? new WebpackAliyunOss({ from: ['./dist/**/**', '!./dist/**/*.html'], // build目录下除html之外的所有文件 dist: `${OSS_DIST}/${UNIQUE_KEY}`, // oss上传目录 region: OSS_REGION, // 地区, 比如 oss-cn-hangzhou accessKeyId: OSS_ACCESS_KEY_ID, accessKeySecret: OSS_ACCESS_KEY_SECRET, bucket: OSS_BUCKET, timeout: 1200000, deleteOrigin: true, deleteEmptyDir: true, overwrite: true }) : () => {} ] } 4: 在vue.config.js同级目录下面新增「.env」文件, 写入对应的配置, 配置对应的值按照自己的oss配置来 DEPLOY=online OSS_BUCKET=xxx OSS_DIST=/oinone/product OSS_URL=https://xxxxxx/oinone/product/ OSS_REGION=oss-cn-hangzhou OSS_ACCESS_KEY_ID=xxxx OSS_ACCESS_KEY_SECRET=xxxx

    2023年11月1日
    77600
  • 前端元数据介绍

    模型 属性名 类型 描述 id string 模型id model string 模型编码 name string 技术名称 modelFields RuntimeModelField[] 模型字段 modelActions RuntimeAction[] 模型动作 type ModelType 模型类型 module string 模块编码 moduleName string 模块名称 moduleDefinition RuntimeModule 模块定义 pks string[] 主键 uniques string[][] 唯一键 indexes string[][] 索引 sorting string 排序 label string 显示标题 labelFields string[] 标题字段 模型字段 属性名 类型 描述 model string 模型编码 modelName string 模型名称 data string 属性名称 name string API名称 ttype ModelFieldType 字段业务类型 multi boolean (可选) 是否多值 store boolean 是否存储 displayName string (可选) 字段显示名称 label string (可选) 字段页面显示名称(优先于displayName) required boolean | string (可选) 必填规则 readonly boolean | string (可选) 只读规则 invisible boolean | string (可选) 隐藏规则 disabled boolean | string (可选) 禁用规则 字段业务类型 字段类型 值 描述 String ‘STRING’ 文本 Text ‘TEXT’ 多行文本 HTML ‘HTML’ 富文本 Phone ‘PHONE’ 手机 Email ‘EMAIL’ 邮箱 Integer ‘INTEGER’ 整数 Long ‘LONG’ 长整型 Float ‘FLOAT’ 浮点数 Currency ‘MONEY’ 金额 DateTime ‘DATETIME’ 时间日期 Date ‘DATE’ 日期 Time ‘TIME’ 时间 Year ‘YEAR’ 年份 Boolean ‘BOOLEAN’ 布尔型 Enum ‘ENUM’ 数据字典 Map ‘MAP’ 键值对 Related ‘RELATED’ 引用类型 OneToOne ‘O2O’ 一对一 OneToMany ‘O2M’ 一对多 ManyToOne ‘M2O’ 多对一 ManyToMany ‘M2M’ 多对多 模型动作 属性名 类型 描述 name string…

    2024年9月21日
    82900
  • oio-switch 开关

    API 参数 说明 类型 默认值 版本 autofocus 组件自动获取焦点 boolean false checked(v-model: checked ) 指定当前是否选中 checkedValue | unCheckedValue false checkedChildren 选中时的内容 slot checkedValue 选中时的值 boolean | string | number true disabled 是否禁用 boolean false loading 加载中的开关 boolean false unCheckedChildren 非选中时的内容 slot unCheckedValue 非选中时的值 boolean | string | number false 事件 事件名称 说明 回调参数 change 变化时回调函数 Function(checked: boolean | string | number, event: Event)

    2023年12月18日
    60500
  • 打开弹窗的action,传入默认的查询条件不生效

    场景 form视图中的action,点击后打开table的弹窗的,xml中配置的filter,但是table查询的时候没有带上查询条件: <action name=”action_name” label=”打开tabel弹窗视图” filter=”id==${activeRecord.id}” /> 解决方案 将xml中的activeRecord修改成openerRecord即可。 <action name=”action_name” label=”打开tabel弹窗视图” filter=”id==${openerRecord.id}” />

    2023年11月1日
    92000

Leave a Reply

登录后才能评论