面试官:ui组件可以自动加载,那么业务组件可以吗?

简介: 面试官:ui组件可以自动加载,那么业务组件可以吗?

大厂面试题分享 面试题库

前端面试题库 (面试必备)   推荐:★★★★★

地址:前端面试题库

背景

笔者在最近在公司接手了一个老的对内使用的项目,接手后体验了下 发现首屏加载比较慢。分析了下大概的原因是main.js挂载了太多了东西,没有开启gzip的话app.js有4.2M。

按照常规的思路就是把全局引入的东西手动去掉,可是手动这个项目设计到的页面太多了,纯人工来改的话涉及到很多人天的工作量,

问题

基于的代码我们可以明显的发现一些可以优化的小点点

  • 项目在main.js中有全局引入业务组件(还有directives filters),但是业务组件不一定是在每个页面都使用
  • 项目在main.js中有全局引入常量(还有utils)

这两个点在很多项目都会有,常规的思路是我们手动的一个组件一个组件的搜,然后修改。可是对于文件很多的老系统来说不太现实,需要大量的人去做这种事情。

思路

  • 将所有的业务组件遍历出来生成一个Map<componentName,componentPath>
  • 使用glob库拿到所有的vuejs 文件
  • 定义2个方法
  • 使用 vue-template-compiler 解析模板 看一下当前页面是否使用公共业务组件,有的话放到一个数组内
  • 使用@babel/parser 解析js生成ast
  • 解析 ast 看看是否引入 并且在components内注册,如果没有的话引入,并且注册

动手

首先我们把所需要的包安装一下,我们先操作单个文件,

pnpm i @babel/parser @babel/generator @babel/traverse @babel/types vue-template-compiler glob
复制代码

生成 Map<componentName,componentPath>

我们项目的业务组件还比较规范(如果实在不规范,其实手动维护一下这个Map也工作量不大),src/common/components有2个文件夹 basic 是基础组件,business里面是基于基础组件生成的业务组件,当然代码库内的代码都是随便写的,只是为了展示如何做自动加载组件

这一部分代码比较简单,引入fs,然后遍历文件夹就可以了

/**
 *
 * @param {string} p 路径
 */
function resolve (p) {
  return path.resolve(__dirname, '..', p)
}
// 所有组件的组件的 名称和路径映射
const allComponentMaps = fs.readdirSync(resolve('src/common/components/basic')).reduce((prev, cur) => {
  // 我们项目不存在直接放外面的组件
  if (!cur.includes('.')) {
    prev[cur] = `@/common/components/basic/${cur}`
  }
  return prev
}, {})
fs.readdirSync(resolve('src/common/components/business')).reduce((prev, cur) => {
  // 我们项目不存在直接放外面的组件
  if (!cur.includes('.')) {
    prev[cur] = `@/common/components/business/${cur}`
  }
  return prev
}, allComponentMaps)
console.log(allComponentMaps)
复制代码

nodemon运行这个js 可以得出如下结果

解析vue文件

首先准备一个app.vue内容如下

<template>
  <div id="app">
    <div id="nav">
      <s-input />
      <s-file />
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  components: {
  }
}
</script>
复制代码

首先通过fs模块得到源码的内容 content

// 目标文件
const targetFile = path.resolve(__dirname, './App.vue')
// 得到文件内容
const content = fs.readFileSync(targetFile).toString()
复制代码

然后编写一个方法解析html模板

/**
 *
 * @param {t.node} node
 * @param {Set} result
 */
function parseHTML (node, result = new Set()) {
  if (allComponentList.some(item => item === node.tag)) {
    result.add(node.tag)
  } else {
    (node.children || []).forEach(element => {
      parseHTML(element, result)
    })
  }
  return result
}
const result = parseHTML(compiler.compile(content).ast)
复制代码

可以看到控制台输出

得到当前文件使用了哪些业务组件后,接下来就是解析js,然后动态的import进去并注册就好了

借助一个网站我们可以知道 直接import A from ‘b'中的A是 ImportDefaultSpecifier类型

通过看ast。我们可以得知一条import 语句是ImportDeclaration类型的,所以借助@babel/types 可以生成ImportDeclaration,

如何使用@babel/types 生成语句

我们使用 t 代表@babel/types

一个import 语句的type是ImportDeclaration 那么就调用 t.importDeclaration方法 看api文档可以得知 t.importDeclaration 方法第一个入参就是ImportDefaultSpecifier类型 ImportDefaultSpecifier 可以借助t.importDefaultSpecifier方法生成

在入口文件生成imort 语句

/**
 *
 * @param {string} str
 * @returns
 */
function camelToStr (str) {
  return str.replace(/-([a-z])/g, function (all, letter) {
    return letter.toUpperCase()
  })
}
// 将用到的业务组件,并且没有引入的 引入一下
traverse(scriptAst, {
  Program (path, state) {
    const node = path.node
    const body = node.body
    tempRes.forEach(componentName => {
      const importDefaultSpecifier = t.importDefaultSpecifier(t.identifier(camelToStr(componentName)))
      const importDeclaration = t.importDeclaration(
        [
          importDefaultSpecifier
        ],
        t.StringLiteral(allComponentMaps[componentName])
      )
      body.unshift(importDeclaration)
    })
  }
})
const sc = generator(scriptAst.program)
// 先随便生成到一个地方做测试
fs.writeFileSync(
  './a.vue',
  content.replace(
    /<script>([\s\S]+?)<\/script>/,
    `<script>\n${sc.code}\n</script>`
  )
)
复制代码

生成的效果图如下,我们可以明显看到需要引入的s-file 和 s-input都引入进来了

那下一步就是判断export default 里面是否有 components 并注册 组件了

自动注册组件

看一下ast 想要构建一个components 我们需要 ObjectProperty 然后ObjectPropertyvalueObjectExpressionObjectPropertyproperties属性是 一个 ObjectProperty[]

所以我们可以得出全部的代码如以下链接

show一下成果

通过图片得知,我们当前的替换是成功了,简单版的业务业务组件自动导入就做好了

批量替换

这里批量替换笔者先不做,准备用一整篇文章来写,因为里面内容很多,也会因为一些人写代码的方式问题遇到非常多的问题和跳转

大厂面试题分享 面试题库

前端面试题库 (面试必备)   推荐:★★★★★

地址:前端面试题库

相关文章
|
4月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
150 4
|
4月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
225 1
|
1月前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
446 0
|
3月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
361 12
|
4月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
8月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
472 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
503 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
10月前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
434 38
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
|
8月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
977 1
|
7月前
|
安全 API 开发者
深入探索ArkUI中的@LocalBuilder装饰器:构建高效可维护的UI组件
在ArkUI框架中,组件化开发至关重要。@LocalBuilder作为自API version 12引入的装饰器,专注于组件内部私有构建,确保封装性与安全性。本文解析其工作原理、参数传递机制及与@Builder的区别,结合典型场景代码示例,助开发者掌握这一工具。通过状态驱动UI更新、复杂组件组合等实践,优化性能并提升代码可维护性,推动高效UI架构构建。
181 0

热门文章

最新文章