Front-end page compiling conversion method and device based on AST and medium

Abstract

The embodiment of the invention discloses a front-end page compiling conversion method and device based on AST and a medium, belongs to the technical field of data processing, and solves the problems that existing front-end page conversion efficiency is low, cross-frame adaptation is difficult, and response type layout is insufficient. Comprising the following steps: generating an AST node tree, performing traversal analysis on the AST node tree, and constructing an AST analysis engine; extracting front-end page information in the AST node tree, and constructing information association based on the extracted front-end page information; based on an AST node matching algorithm, a replacement instruction, a conversion event binding grammar and a module conversion scheme, performing target framework grammar conversion on the Vue template grammar; according to node nesting information and node hierarchies in the AST node tree, path optimization is carried out, a response type page structure is generated, and a front-end page is rendered and optimized through on-demand loading, lazy loading and a page caching mechanism; and module packaging is carried out to realize compiling conversion of a front-end page.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a front-end page compilation and conversion method, device and medium based on AST. Background Art

[0002] With the advancement of front-end engineering, page compilation and conversion play a crucial role in improving development efficiency, optimizing performance, and achieving cross-platform rendering. Traditional front-end page compilation relies primarily on template engines or packaging tools like Webpack, which suffer from low compilation efficiency, poor conversion flexibility, and insufficient support for complex dynamic layouts.

[0003] AST (Abstract Syntax Tree), as an abstract representation of code structure, can accurately parse front-end templates and code structure, providing a strong foundation for page compilation and conversion.

[0004] However, the existing AST parsing solutions lack in-depth analysis of dynamic components and responsive states during the front-end page conversion process, and have insufficient support for cross-frame page conversion, resulting in poor adaptability to page layout and style during the compilation process. Summary of the Invention

[0005] The embodiments of the present application provide a front-end page compilation and conversion method, device and medium based on AST, which are used to solve the following technical problems: the existing AST parsing solution lacks in-depth analysis of dynamic components and responsive states during the front-end page conversion process, and insufficient support for cross-frame page conversion, resulting in poor adaptability to page layout and style during the compilation process.

[0006] The embodiments of this application adopt the following technical solutions:

[0007] The embodiment of the present application provides a front-end page compilation and conversion method based on AST. It includes: generating an AST node tree based on the obtained front-end page source code, traversing and parsing the AST node tree, and building an AST parsing engine; extracting front-end page information in the AST node tree through the AST parsing engine, and building information association based on the extracted front-end page information; converting the Vue template syntax to the target framework syntax based on the AST node matching algorithm, replacement instructions, conversion event binding syntax and module conversion scheme; optimizing the path and generating a responsive page structure based on the node nesting information and node hierarchy in the AST node tree, and rendering and optimizing the front-end page through on-demand loading, lazy loading and page caching mechanisms; and packaging modules based on information association, the converted target framework and the front-end page after rendering optimization to achieve compilation and conversion of the front-end page.

[0008] The embodiment of the present application uses the AST node matching algorithm to achieve seamless conversion of Vue templates to the target framework, reducing the cost of technology stack migration. In addition, the AST path compression algorithm is used to remove redundant nodes and styles and optimize the page packaging volume. Combining the Flexbox / Grid layout algorithm with the CSS-in-JS solution, it supports complex dynamic layouts and multi-screen adaptation. On-demand loading and lazy loading mechanisms are introduced, and caching strategies are integrated to improve page rendering speed. An AST conversion report is generated to facilitate developers to perform code analysis and performance monitoring. It solves the problems of low efficiency of existing front-end page conversion, difficulty in cross-framework adaptation, and insufficient responsive layout, providing an efficient and flexible solution for front-end engineering development.

[0009] In one implementation of the present application, an AST node tree is generated based on the obtained front-end page source code, and the AST node tree is traversed and parsed to build an AST parsing engine, specifically including: performing lexical analysis and syntax analysis on the front-end page source code based on BabelParser to generate an AST node tree, classifying the nodes of the AST node tree, and building an AST node mapping table; through a depth-first traversal algorithm, the AST node tree is scanned layer by layer to determine the dynamic instruction nodes in the Vue template, and the data source of the dynamic instruction binding is extracted, as well as the callback function in the event binding, and the dependency relationship in the callback function is parsed; based on the determined lifecycle hook function, the data binding, state management and responsive dependency relationship in the hook function are obtained, and the data source is determined; through the constructed lifecycle hook function execution timing model and the dependency relationship, the rendering stage of the node is determined.

[0010] In one implementation of the present application, front-end page information is extracted in the AST node tree, and information association is constructed based on the extracted front-end page information, specifically including: extracting the DOM hierarchical structure in the front-end page to construct a virtual node tree; parsing the import statement in the AST node tree to obtain the component path, and recording the component name and file path mapping; determining the reference relationship between the parent component and the child component, and determining the data passed by the slot, and generating a dependency graph through the component nesting relationship; parsing the state management data corresponding to the front-end page to establish a binding relationship between the state data and the view; analyzing the bound data source through the AST node tree to mark the dynamic rendering node.

[0011] In one implementation of the present application, the bound data source is analyzed through the AST node tree to mark the dynamic rendering nodes, specifically including: marking the nodes containing preset instructions and event bindings; analyzing the bound data source through the AST node tree to determine the responsive state, calculated properties and listeners; marking the dynamic rendering nodes, and recording the rendering conditions, circular dependencies and bound data paths of the rendering nodes.

[0012] In one implementation of the present application, the Vue template syntax is converted to the target framework syntax based on the AST node matching algorithm, replacement instructions, conversion event binding syntax and module conversion scheme, specifically including: converting the Vue template syntax into the target framework syntax based on the AST node matching algorithm; replacing the Vue instructions with the conditional rendering and loop structure in the target framework; converting the Vue event binding into the binding syntax corresponding to the target framework; and converting the scoped style in Vue into the CSSModules or styled-components corresponding to the target framework; and converting the style binding in the Vue inline into the object style corresponding to the target framework.

[0013] In one implementation of the present application, the Vue template syntax is converted into the target framework syntax based on the AST node matching algorithm, specifically including: identifying the label nodes, text nodes and dynamic instruction nodes in the Vue template respectively through the AST type judgment algorithm; establishing a conversion mapping table between Vue and the target framework; based on the conversion mapping table, performing structural conversion on the matched AST nodes, and regenerating the target node tree corresponding to the target framework.

[0014] In one implementation of the present application, path optimization is performed and a responsive page structure is generated based on the node nesting information and node hierarchy in the AST node tree, and the front-end page is rendered and optimized through on-demand loading, lazy loading and page caching mechanisms, specifically including: based on the AST path compression algorithm, the AST node tree is detected to remove redundant DOM nodes and style nodes, and continuous nested nodes are merged into a minimum hierarchical structure through the AST path compression algorithm; by establishing a mapping model of node hierarchy, width and height attributes and layout algorithm, the optimal Flex or Grid layout method is automatically selected; according to the frequency of use and dependency of components, module segmentation and lazy loading are dynamically adjusted; through the keep-alive component, cache interface and the corresponding service worker of Webpack / Vite, the corresponding cache mechanism of the front-end page is integrated to render and optimize the front-end page.

[0015] In one implementation of the present application, module packaging is performed based on information association, the converted target framework, and the front-end page after rendering optimization to achieve compilation and conversion of the front-end page, specifically including: converting the Vue template into the component syntax corresponding to the target framework through the AST node converter, calling Prettier or ESLint to format and standardize the generated code, and redirecting the packaging path to adapt to the target framework; modular packaging is performed through Vite or Rollup to separate business logic and static resources; the rendering function corresponding to the target framework is constructed based on the AST node tree, and HTML fragment pre-rendering is performed to extract meta information and SEO data; based on the data cache library corresponding to Vue and the data cache library corresponding to the target framework, a page-level caching mechanism is integrated; the AST conversion path, component dependencies, and performance indicator information are generated into an AST conversion report for visual display.

[0016] An embodiment of the present application provides a front-end page compilation and conversion device based on AST, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can: generate an AST node tree based on the acquired front-end page source code, and traverse and parse the AST node tree to build an AST parsing engine; extract front-end page information from the AST node tree through the AST parsing engine, and build information association based on the extracted front-end page information; convert the Vue template syntax into a target framework syntax based on the AST node matching algorithm, replacement instructions, conversion event binding syntax and module conversion scheme; optimize the path and generate a responsive page structure based on the node nesting information and node hierarchy in the AST node tree, and render and optimize the front-end page through on-demand loading, lazy loading and page caching mechanisms; and package modules based on information association, the converted target framework and the rendered optimized front-end page to achieve compilation and conversion of the front-end page.

[0017] A non-volatile computer storage medium provided by an embodiment of the present application stores computer-executable instructions, which are configured to: generate an AST node tree based on an acquired front-end page source code, traverse and parse the AST node tree, and construct an AST parsing engine; extract front-end page information from the AST node tree through the AST parsing engine, and construct information association based on the extracted front-end page information; convert the Vue template syntax into a target framework syntax based on the AST node matching algorithm, replacement instructions, conversion event binding syntax, and module conversion scheme; optimize the path and generate a responsive page structure based on the node nesting information and node hierarchy in the AST node tree, and render and optimize the front-end page through on-demand loading, lazy loading, and page caching mechanisms; and package modules based on information association, the converted target framework, and the front-end page after rendering optimization to achieve compilation and conversion of the front-end page.

[0018] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects: The embodiments of the present application realize seamless conversion of Vue templates to target frameworks through the AST node matching algorithm, thereby reducing the migration cost of the technology stack. And the AST path compression algorithm is adopted to remove redundant nodes and styles and optimize the page packaging volume. Combining the Flexbox / Grid layout algorithm with the CSS-in-JS solution, it supports complex dynamic layouts and multi-screen adaptation. Introducing on-demand loading and lazy loading mechanisms, and integrating caching strategies to improve page rendering speed. Generate AST conversion reports to facilitate developers to perform code analysis and performance monitoring. It solves the problems of low efficiency of existing front-end page conversion, difficulty in cross-frame adaptation, and insufficient responsive layout, and provides an efficient and flexible solution for front-end engineering development. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments described in the present application. For those skilled in the art, other drawings can be obtained based on these drawings without inventive work. In the drawings:

[0020] Figure 1 A flow chart of a front-end page compilation and conversion method based on AST provided in an embodiment of the present application;

[0021] Figure 2 A schematic diagram of the structure of an AST-based front-end page compilation and conversion device provided in an embodiment of the present application.

[0022] Reference numerals:

[0023] 200: AST-based front-end page compilation and conversion device, 201: processor, 202: memory. DETAILED DESCRIPTION

[0024] The embodiments of the present application provide a front-end page compilation and conversion method, device and medium based on AST.

[0025] In order to enable those skilled in the art to better understand the technical solutions in this application, the following will clearly and completely describe the technical solutions in the embodiments of this application in conjunction with the drawings in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments of this specification, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of this application.

[0026] The technical solutions proposed in the embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0027] Figure 1 A flow chart of a front-end page compilation and conversion method based on AST provided in an embodiment of the present application is as follows: Figure 1 As shown, the AST-based front-end page compilation and conversion method includes the following steps:

[0028] Step 101: Generate an AST node tree based on the obtained front-end page source code, traverse and parse the AST node tree, and build an AST parsing engine.

[0029] In one implementation of the present application, the front-end page source code is lexically analyzed and parsed based on BabelParser to generate an AST node tree, and the AST node tree is classified to construct an AST node mapping table. Through the depth-first traversal algorithm, the AST node tree is scanned layer by layer to determine the dynamic instruction nodes in the Vue template, and the data source of the dynamic instruction binding is extracted, as well as the callback function in the event binding, and the dependency relationship in the callback function is parsed. Based on the determined lifecycle hook function, the data binding, state management and responsive dependency relationship in the hook function are obtained, and the data source is determined. The rendering stage of the node is determined by executing the constructed lifecycle hook function in a timing model and dependency relationship.

[0030] Specifically, we build a multi-language AST parsing engine based on Babel / Acorn to implement node mapping, semantic analysis, and incremental update tracking. This process includes the following steps:

[0031] 1. Use BabelParser to perform lexical and grammatical analysis on the front-end page source code to generate a complete AST node tree:

[0032] Configure BabelParser's parsing options based on the source code type, such as Vue templates, JSX, or TypeScript, including module types, plugin support, etc.

[0033] Perform lexical analysis and grammatical parsing on the front-end source code to generate a complete AST node structure, including template structure, JS logic and CSS references;

[0034] Capture syntax errors or exceptions that occur during AST parsing, and handle the compatibility of Vue-specific syntax (such as v-if, v-for).

[0035] 2. Build an AST node mapping table to mark HTML tag nodes, JS logic nodes, and CSS style nodes:

[0036] Classify nodes according to AST node types, such as ElementNode, ExpressionStatement, and StyleElement;

[0037] Add markup information to each node, including HTML tags, dynamic instructions (such as v-if, v-for), event binding (such as @click), and inline styles;

[0038] Build a parent-child node relationship tree, mark nested components, slot contents, and scope references, and facilitate subsequent structural conversion.

[0039] 3. Extract dynamic instructions (such as v-if, v-for) and event bindings by deeply traversing the AST tree:

[0040] Use depth-first traversal algorithm to scan AST nodes layer by layer, including template layer, logic layer and style layer;

[0041] Identify dynamic instruction nodes such as v-if, v-for, v-bind, v-model in Vue templates and extract the data source bound to the instruction;

[0042] Extract callback functions from event bindings (such as @click and @input) and resolve dependencies in expressions.

[0043] 4. Identify lifecycle hooks of frameworks such as Vue and React, and perform semantic analysis:

[0044] Parse Vue's beforeMount, mounted, beforeUpdate and other hooks, as well as React's componentDidMount, useEffect and other lifecycle functions;

[0045] Analyze data binding, state management, and responsive dependencies in lifecycle hooks, and identify the source of data in ref, reactive, or this.state;

[0046] Determine the execution time of the lifecycle hook and mark the rendering stage of the current AST node, such as the mounting stage, update stage or destruction stage, to provide semantic support for subsequent code conversion.

[0047] Step 102: extract the front-end page information from the AST node tree through the AST parsing engine, and build information association based on the extracted front-end page information.

[0048] In one implementation of the present application, a DOM hierarchical structure is extracted in the front-end page to construct a virtual node tree. The import statement is parsed in the AST node tree to obtain the component path, and the component name and file path mapping is recorded. The reference relationship between the parent component and the child component is determined, as well as the data passed by the slot, and a dependency graph is generated through the component nesting relationship. The state management data corresponding to the front-end page is parsed to establish a binding relationship between the state data and the view. The bound data source is analyzed through the AST node tree to mark the dynamic rendering node.

[0049] Specifically, in the embodiment of the present application, the DOM structure is extracted to generate a VNode tree, the component life cycle is parsed, and the dynamic instructions and state management module are analyzed. The implementation steps of this process are as follows:

[0050] 1. Extract the DOM hierarchical structure in the page and build a virtual node tree VNode:

[0051] Filter out HTML tag nodes and Vue component nodes from AST, and filter out logical expressions and style nodes;

[0052] Create a standardized VNode data structure based on each node's type, attributes (such as class, style) and binding data (such as v-if, v-for);

[0053] Recursively traverse the nested structure in the template, generate a complete VNode tree, and record the parent-child component relationship and slot content;

[0054] 2. Analyze component dependencies and generate component reference path table:

[0055] Parse the import statement from the AST to obtain the component path, such as importButtonfrom'. / Button.vue', and record the mapping between the component name and the file path;

[0056] Identify the reference relationship between the parent component and the child component, and<slot>The data passed by the slot;

[0057] By nesting components, a dependency graph is generated to facilitate reuse and splitting during subsequent conversions.

[0058] 3. Parse the state management in the page, such as Vuex or Pinia, and establish the binding relationship between state data and view:

[0059] Analyze the syntax of mapState, mapGetters, or useStore() to locate the reference path of global state management;

[0060] Track the responsive data (such as ref, reactive) and state mapping used within the component, and determine the binding relationship between state and view;

[0061] Build a state dependency table to map the data source in the page (such as Vuex module or PiniaStore) to the component rendering node one by one.

[0062] 4. Mark dynamic rendering nodes and perform dependency tracking:

[0063] In one implementation of this application, nodes containing preset instructions and event bindings are marked. The bound data source is analyzed through the AST node tree to determine the responsive state, computed properties, and listeners. Dynamic rendering nodes are marked, and their rendering conditions, circular dependencies, and bound data paths are recorded.

[0064] Specifically, mark nodes containing instructions such as v-if, v-for, v-bind, and event bindings such as: @click, @input;

[0065] Furthermore, the bound data source is analyzed through AST to identify responsive states, computed properties, and listeners;

[0066] Furthermore, dynamic rendering nodes are marked, and the rendering conditions, circular dependencies, and bound data paths of the nodes are recorded, providing a basis for subsequent "dynamic style generation".

[0067] Step 103: Based on the AST node matching algorithm, replacement instructions, conversion event binding syntax and module conversion scheme, the Vue template syntax is converted into the target framework syntax.

[0068] In one implementation of the present application, Vue template syntax is converted to the target framework syntax based on an AST node matching algorithm. Vue instructions are replaced with conditional rendering and loop structures in the target framework. Vue event bindings are converted to the binding syntax corresponding to the target framework, and scoped styles in Vue are converted to CSSModules or styled-components corresponding to the target framework. Furthermore, style bindings in Vue inlines are converted to object-style styles corresponding to the target framework.

[0069] Specifically, in the embodiment of the present application, the garbage collection mechanism is enhanced and combined with the Vue life cycle to ensure that useless objects and data are recycled in a timely manner at the appropriate time. The implementation process is as follows:

[0070] 1. Convert Vue template syntax to React or Svelte syntax based on AST node matching algorithm:

[0071] In one implementation of the present application, the tag nodes, text nodes, and dynamic instruction nodes in the Vue template are identified separately through the AST type judgment algorithm. A conversion mapping table is established between Vue and the target framework. Based on the conversion mapping table, the matched AST nodes are structurally converted, and the target node tree corresponding to the target framework is regenerated.

[0072] Specifically, through the AST type judgment algorithm, identify the tag node (ElementNode), text node (TextNode) and dynamic instruction node (DirectiveNode) in the Vue template;

[0073] Create a conversion mapping table from Vue to React / Svelte;

[0074] Perform structural transformation on the matched AST nodes and regenerate the target node tree in React or Svelte.

[0075] 2. Replace Vue instructions (such as v-if, v-for) with conditional rendering and loop structures in React or Svelte:

[0076] Conditional rendering conversion: v-if = "isShow" in Vue → React: {isShow&& };

[0077] v-else-if="isLogin" in Vue → React: {isLogin? :null};

[0078] Loop rendering transitions:

[0079] v-for in Vue = "item in list" → React: list.map(item=> {item} );

[0080] {#eachlistasitem} in Svelte;

[0081] Record the responsive data paths bound to each dynamically rendered node to ensure converted React or Svelte applications remain responsive.

[0082] 3. Convert Vue event binding (such as @click) to onClick in React or binding syntax of Svelte:

[0083] Event binding conversion:

[0084] Vue:@click="handleClick"→React:onClick="{handleClick};

[0085] Vue:@input="onInputChange"→React:onChange={onInputChange};

[0086] Process the event object parameter of @click="handleClick($event)" in Vue and map it to the event object of React;

[0087] Svelte-compatible event listeners:

[0088] Vue:@keyup.enter="submit"→Svelte:on:keyup|enter="{submit}.

[0089] 4. Convert CSS modular solutions to support CSS-in-JS or ScopedCSS.

[0090] Convert scoped styles in Vue to React's CSSModules or styled-components;

[0091] Convert Vue's inline :style binding to object-style styles in React:

[0092] Vue::style="{color:textColor}";

[0093] React:style={{color:textColor}};

[0094] Svelte <style>默认是作用域隔离，不需要额外转换，但需处理动态变量绑定。

[0095] 步骤104、根据AST节点树中的节点嵌套信息与节点层级，进行路径优化并生成响应式页面结构，以及通过按需加载、懒加载与页面缓存机制，对前端页面进行渲染与优化。

[0096] 在本申请的一种实现方式中，基于AST路径压缩算法，对AST节点树进行检测，以将冗余的DOM节点和样式节点进行去除，并通过AST路径压缩算法将连续的嵌套节点合并成最小层级结构。通过建立节点层级、宽高属性与布局算法的映射模型，自动选择最优的Flex或Grid布局方式。根据组件的使用频率和依赖关系，动态调整模块分割和懒加载。通过keep-alive组件、缓存接口以及Webpack / Vite对应的service worker，集成前端页面对应的缓存机制，以对前端页面进行渲染与优化。

[0097] 具体地，在本申请实施例中，优化Vue组件的生命周期，确保每个组件在销毁时能够彻底清理相关内存和资源。实现方式如下：

[0098] 1、基于AST路径压缩算法，移除冗余的DOM节点和样式节点：

[0099] 通过深度遍历AST树，检测重复的静态结构(如无意义的嵌套div节点或无效的span标签)；

[0100] 将相同CSS选择器或重复的class样式进行合并，减少冗余样式节点；

[0101] 利用路径压缩算法(PathCompression)，将连续的嵌套节点合并成最小层级结构。

[0102] 2、引入Flexbox / Grid布局算法，生成响应式页面结构：

[0103] 通过AST分析节点层级和宽高属性，判断当前页面适合使用Flex还是Grid布局；

[0104] 自动生成mediaquery或@container查询，支持不同屏幕尺寸下的自适应渲染；

[0105] 将Vue中的v-if、v-show或v-bind:class绑定到Flex / Grid布局的动态展示节点上，实现组件级自适应。

[0106] 3、实现按需加载和懒加载机制，减少初次渲染的页面体积：

[0107] 将Vue路由vue-router的import()替换为动态import()，实现模块分割；

[0108] 进一步地，使用Vue的defineAsyncComponent或React的React.lazy实现组件级别懒加载；

[0109] 进一步地，替换Vue中的v-lazy指令为IntersectionObserver实现图片懒加载。

[0110] 4、集成页面缓存机制，提升二次访问性能：

[0111] 使用keep-alive组件对频繁切换的页面进行缓存；

[0112] 引入localStorage或IndexedDB缓存接口请求数据，避免重复请求；

[0113] 配置Webpack或Vite的serviceworker缓存HTML、CSS和JS资源，提高页面二次加载速度。

[0114] 步骤105、基于信息关联、转换后的目标框架以及渲染优化后的前端页面，进行模块打包，以实现前端页面的编译转换。

[0115] 在本申请的一种实现方式中，通过AST节点转换器将Vue模板转换为目标框架对应的组件语法，调用Prettier或ESLint对生成代码进行格式化与规范校验，并重定向适配目标框架的打包路径。通过Vite或Rollup进行模块化打包，以对业务逻辑和静态资源进行分离。基于AST节点树构建目标框架对应的渲染函数，执行HTML片段预渲染，以提取元信息及SEO数据。基于Vue对应的数据缓存库以及目标框架对应的数据缓存库，集成页面级缓存机制。将AST转换路径、组件依赖关系、性能指标信息进行生成AST转换报告，以进行可视化展示。

[0116] 具体地，在本申请实施例中，减少初始化时的内存占用，通过按需加载数据和组件，提升性能。具体实施方式如下：

[0117] 1、生成目标框架代码(如React或Svelte)并进行代码格式化：

[0118] 通过AST节点转换器，将Vue模板转换为目标框架(React / Svelte)对应的JSX或Svelte组件语法；

[0119] 调用Prettier或ESLint对生成的目标代码进行格式化和规范校验，确保符合目标框架的编码风格；

[0120] 进一步地，对于引用的CSS文件、图片资源、SVG图标等路径进行重定向，适配React / Svelte的打包路径。

[0121] 2、使用Vite或Rollup进行模块化打包，分离业务逻辑和静态资源：

[0122] 基于AST分析组件依赖关系，自动生成模块导入路径；

[0123] 把静态资源分离，CSSModules或Tailwind样式拆分；SVG图标、图片资源进行asset分类；动态组件按chunk进行拆分；

[0124] 进一步地，将TreeShaking与按需打包，使用Vite的esbuild进行依赖去重；Rollup的treeshake:true移除无用代码；支持React的lazy()与Svelte的dynamicimport。

[0125] 3、支持Server-SideRendering(SSR)模式，并集成前端缓存策略：

[0126] 首先基于AST构建SSR渲染函数，VueAST→React的getServerSideProps()；VueAST→Svelte的svelte-kitload()；

[0127] 实现HTML片段预渲染(Pre-rendering)，使用vite-ssr或Next.js构建服务端HTML；提取<head>元信息及SEO元数据；

[0128] 进一步地，将页面级别缓存管理，Vue中的keep-alive；React中的react-query数据缓存；Svelte中的svelte-store状态缓存。

[0129] 4、生成可视化AST转换报告，便于调试和性能分析：

[0130] 首先构建AST节点映射关系，记录Vue→React / Svelte的转换路径；

[0131] 集成AST可视化工具ASTExplorer或ASTVisualizer，展示组件依赖关系图；

[0132] 生成转换前后代码体积对比报告，以及CSS、JS的Bundle大小分析。

[0133] 图2为本申请实施例提供的一种基于AST的前端页面编译转换设备的结构示意图。如图2所示，基于AST的前端页面编译转换设备200，包括：至少一个处理器201；以及，与至少一个处理器201通信连接的存储器202；其中，存储器202存储有可被至少一个处理器201执行的指令，指令被至少一个处理器201执行，以使至少一个处理器201能够：基于获取到的前端页面源码生成AST节点树，并对AST节点树进行遍历解析，构建AST解析引擎；通过AST解析引擎，在AST节点树中进行前端页面信息提取，并基于提取的前端页面信息构建信息关联；基于AST节点匹配算法、替换指令、转换事件绑定语法与模块转换方案，对Vue模板语法进行目标框架语法转换；根据AST节点树中的节点嵌套信息与节点层级，进行路径优化并生成响应式页面结构，以及通过按需加载、懒加载与页面缓存机制，对前端页面进行渲染与优化；基于信息关联、转换后的目标框架以及渲染优化后的前端页面，进行模块打包，以实现前端页面的编译转换。

[0134] 本申请实施例提供的一种非易失性计算机存储介质，存储有计算机可执行指令，计算机可执行指令设置为：基于获取到的前端页面源码生成AST节点树，并对AST节点树进行遍历解析，构建AST解析引擎；通过AST解析引擎，在AST节点树中进行前端页面信息提取，并基于提取的前端页面信息构建信息关联；基于AST节点匹配算法、替换指令、转换事件绑定语法与模块转换方案，对Vue模板语法进行目标框架语法转换；根据AST节点树中的节点嵌套信息与节点层级，进行路径优化并生成响应式页面结构，以及通过按需加载、懒加载与页面缓存机制，对前端页面进行渲染与优化；基于信息关联、转换后的目标框架以及渲染优化后的前端页面，进行模块打包，以实现前端页面的编译转换。

[0135] 本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

[0136] 以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请的实施例可以有各种更改和变化。而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。< / style> < / slot>

Claims

1. A front-end page compilation and conversion method based on AST, characterized in that: The method comprises: Generate an AST node tree based on the obtained front-end page source code, traverse and parse the AST node tree, and build an AST parsing engine; Extracting front-end page information from the AST node tree through the AST parsing engine, and building information associations based on the extracted front-end page information; Convert Vue template syntax to target framework syntax based on AST node matching algorithm, replacement instructions, conversion event binding syntax and module conversion scheme; Optimize the path and generate a responsive page structure based on the node nesting information and node hierarchy in the AST node tree, and render and optimize the front-end page through on-demand loading, lazy loading and page caching mechanisms; Based on the information association, the converted target framework and the front-end page after rendering optimization, module packaging is performed to achieve compilation and conversion of the front-end page.

2. A front-end page compilation and conversion method based on AST according to claim 1, characterized in that, The method generates an AST node tree based on the obtained front-end page source code, traverses and parses the AST node tree, and constructs an AST parsing engine, specifically including: Perform lexical analysis and grammatical analysis on the front-end page source code based on BabelParser to generate the AST node tree, classify the nodes in the AST node tree, and construct an AST node mapping table; Scan the AST node tree layer by layer through the depth-first traversal algorithm to determine the dynamic instruction node in the Vue template, extract the data source bound to the dynamic instruction, and extract the callback function in the event binding, and parse the dependency relationship in the callback function; Based on the determined lifecycle hook function, obtain the data binding, state management and responsive dependencies in the hook function, and determine the data source; The timing model is executed by constructing the lifecycle hook function and the dependencies to determine the rendering phase of the node.

3. A front-end page compilation and conversion method based on AST according to claim 1, characterized in that, The extracting of front-end page information from the AST node tree and building information association based on the extracted front-end page information specifically include: Extracting the DOM hierarchical structure from the front-end page to construct a virtual node tree; Parse the import statement in the AST node tree to obtain the component path, and record the mapping between the component name and the file path; Determine the reference relationship between the parent component and the child component, as well as the data passed by the slot, and generate a dependency graph through the component nesting relationship; Parsing the state management data corresponding to the front-end page to establish a binding relationship between the state data and the view; The bound data source is analyzed through the AST node tree to mark the dynamic rendering nodes.

4. A front-end page compilation and conversion method based on AST according to claim 3, characterized in that, The bound data source is analyzed through the AST node tree to mark the dynamic rendering node, specifically including: Mark the nodes and events containing preset instructions; Analyze the bound data source through the AST node tree and determine the responsive state, calculated properties and listeners; The dynamic rendering node is marked, and the rendering conditions, circular dependencies, and bound data paths of the rendering node are recorded.

5. A front-end page compilation and conversion method based on AST according to claim 1, characterized in that, The target framework syntax conversion of Vue template syntax based on AST node matching algorithm, replacement instructions, conversion event binding syntax and module conversion scheme specifically includes: Convert Vue template syntax to target framework syntax based on AST node matching algorithm; Replace Vue directives with conditional rendering and loop structures in the target framework; Convert Vue event binding to the binding syntax corresponding to the target framework; And, convert the scoped styles in Vue into CSSModules or styled-components corresponding to the target framework; And, convert the style binding in Vue inline to the object style corresponding to the target framework.

6. A front-end page compilation and conversion method based on AST according to claim 5, characterized in that, The AST node matching algorithm is used to convert the Vue template syntax into the target framework syntax, specifically including: Through the AST type judgment algorithm, the label nodes, text nodes and dynamic instruction nodes in the Vue template are identified respectively; Establish a conversion mapping table between Vue and the target framework; Based on the conversion mapping table, the matched AST nodes are structurally converted, and the target node tree corresponding to the target framework is regenerated.

7. A front-end page compilation and conversion method based on AST according to claim 1, characterized in that, The method of performing path optimization and generating a responsive page structure based on the node nesting information and node hierarchy in the AST node tree, and rendering and optimizing the front-end page through on-demand loading, lazy loading and page caching mechanisms, specifically includes: Based on the AST path compression algorithm, the AST node tree is detected to remove redundant DOM nodes and style nodes, and the continuous nested nodes are merged into a minimum hierarchical structure through the AST path compression algorithm; Automatically select the optimal Flex or Grid layout method by establishing a mapping model between node hierarchy, width and height attributes, and layout algorithms; Dynamically adjust module splitting and lazy loading based on component usage frequency and dependencies; Through the keep-alive component, cache interface and the service worker corresponding to Webpack / Vite, the cache mechanism corresponding to the front-end page is integrated to render and optimize the front-end page.

8. A front-end page compilation and conversion method based on AST according to claim 1, characterized in that, The module packaging based on the information association, the converted target framework and the front-end page after rendering optimization to achieve the compilation and conversion of the front-end page specifically includes: Convert the Vue template to the component syntax corresponding to the target framework through the AST node converter, call Prettier or ESLint to format and standardize the generated code, and redirect the packaging path to adapt to the target framework; Modular packaging through Vite or Rollup to separate business logic and static resources; Constructing a rendering function corresponding to the target framework based on the AST node tree and performing pre-rendering of HTML fragments to extract meta information and SEO data; Integrate page-level caching mechanism based on the data cache library corresponding to Vue and the data cache library corresponding to the target framework; Generate an AST conversion report based on the AST conversion path, component dependencies, and performance indicator information for visual display.

9. A front-end page compilation and conversion device based on AST, characterized in that: The device comprises a memory for storing computer program instructions and a processor for executing the program instructions, wherein when the computer program instructions are executed by the processor, the device is triggered to execute the method according to any one of claims 1 to 8.

10. A non-volatile computer storage medium storing computer executable instructions, characterized in that: The computer executable instructions can execute the method according to any one of claims 1 to 8.

Images