diff --git a/ace-loader/src/card-loader.js b/ace-loader/src/card-loader.js
index 8f23da41df0a44c23dbb30314da6a57fcf92fc62..aeaf8824a163b2ffa3974c4562cb4f8148589406 100644
--- a/ace-loader/src/card-loader.js
+++ b/ace-loader/src/card-loader.js
@@ -23,6 +23,13 @@ import {
 from './util'
 import { parseFragment } from './parser'
 
+/**
+ * Webpack loader for processing card components and their dependencies
+ * Handles templates, styles, and nested custom elements with validation
+ * 
+ * @param {string} source - The source content of the file being processed
+ * @returns {string} Generated JavaScript code with all component dependencies
+ */
 function loader(source) {
   this.cacheable && this.cacheable()
   const options = {
@@ -101,6 +108,16 @@ function loader(source) {
   return output
 }
 
+/**
+ * Finds and identifies style files associated with a given base filename
+ * Checks for multiple style file extensions (CSS, LESS, SASS, SCSS)
+ * 
+ * @param {string} fileName - The base filename without extension
+ * @returns {Object} An object containing:
+ *            - extStyle: boolean indicating if style file exists
+ *            - styleFileName: full path to the style file (if exists)
+ *            - type: the style file type ('css', 'less', or 'sass')
+ */
 function findStyleFile (fileName) {
   let extStyle = false
   let styleFileName = fileName + '.css'
@@ -132,6 +149,17 @@ function findStyleFile (fileName) {
   return {extStyle: extStyle, styleFileName: styleFileName, type: type}
 }
 
+/**
+ * Adds JSON configuration file loading to the output string
+ * Handles both .json and deprecated .js configuration files with appropriate warnings
+ * 
+ * @param {Object} _this - Webpack loader context
+ * @param {string} output - Current output string to append to
+ * @param {string} fileName - Base filename without extension
+ * @param {string} query - Query string to append to the require path
+ * @param {string} [elementLastName] - Optional element name for scoped variables
+ * @returns {string} Updated output string with JSON configuration loading
+ */
 function addJson(_this, output, fileName, query, elementLastName) {
   const content = `${elementLastName ? 'var card_element_json_' + elementLastName : 'var card_json'} =`
   if (fs.existsSync(fileName + '.json') && !fs.existsSync(fileName + '.js')) {
diff --git a/ace-loader/src/cardJson-plugin.js b/ace-loader/src/cardJson-plugin.js
index 30250efed6681e914a99ba0956c180eb2ea78b72..b5aa148d2317ffb368efd6ced70c6381e7411c52 100644
--- a/ace-loader/src/cardJson-plugin.js
+++ b/ace-loader/src/cardJson-plugin.js
@@ -16,10 +16,18 @@
 const path = require('path')
 const { Compilation } = require('webpack')
 
+/**
+ * Webpack plugin that processes assets after compilation completes
+ * Modifies assets before final emission, excluding the main ability file
+ */
 class AfterEmitPlugin {
   constructor() {
   }
 
+  /**
+   * Apply method required by webpack plugin interface
+   * @param {Object} compiler - Webpack compiler instance
+   */
   apply(compiler) {
     compiler.hooks.thisCompilation.tap('card', (compilation) => {
       compilation.hooks.processAssets.tapAsync(
@@ -41,6 +49,13 @@ class AfterEmitPlugin {
   }
 }
 
+/**
+ * Processes JavaScript assets to extract card components and convert them to JSON format
+ * 
+ * @param {string} key - Asset file path key
+ * @param {Object} assets - Webpack assets object
+ * @param {Object} compilation - Webpack compilation object
+ */
 function sourceChange(key, assets, compilation) {
   try {
     const extName = path.extname(key);
@@ -72,6 +87,13 @@ function sourceChange(key, assets, compilation) {
   }
 }
 
+/**
+ * Processes individual element declarations in source code and extracts their values
+ * 
+ * @param {string} element - The line of code containing the element declaration
+ * @param {string} source - The full source code of the file
+ * @param {Object} jsonOut - The output object that collects extracted values
+ */
 function elementChange(element, source, jsonOut) {
   if (element.trim() === '' || element.trim() === '//') {
   } else {
@@ -92,6 +114,16 @@ function elementChange(element, source, jsonOut) {
   }
 }
 
+/**
+ * Organizes extracted card components into a structured JSON object
+ * Validates and processes different types of card components
+ * 
+ * @param {Object} assetReplace - The output object being built
+ * @param {string} key - The component type key (e.g., 'card_template')
+ * @param {Object} value - The component value to process
+ * @param {Object} compilation - Webpack compilation object for error reporting
+ * @param {string} sourceKey - Source file path for error context
+ */
 function toAddJson(assetReplace, key, value, compilation, sourceKey) {
   assetReplace['template'] = assetReplace['template'] || {};
   assetReplace['styles'] = assetReplace['styles'] || {};
@@ -128,6 +160,16 @@ function toAddJson(assetReplace, key, value, compilation, sourceKey) {
   }
 }
 
+/**
+ * Processes and organizes nested element components into the final JSON structure
+ * Handles templates, styles, and data for individual card elements
+ * 
+ * @param {Object} assetReplace - The main output object being constructed
+ * @param {string} key - The element identifier key (e.g., 'card_element_template_header')
+ * @param {Object} value - The element's content to be processed
+ * @param {Object} compilation - Webpack compilation object for error handling
+ * @param {string} sourceKey - Source file path for error context
+ */
 function addElement(assetReplace, key, value, compilation, sourceKey) {
   const keyName = key.substr(key.lastIndexOf('_') + 1, key.length - key.lastIndexOf('_') + 1);
   assetReplace[keyName] = assetReplace[keyName] || {};
@@ -165,6 +207,15 @@ function addElement(assetReplace, key, value, compilation, sourceKey) {
   }
 }
 
+/**
+ * Normalizes and validates component props configuration for custom elements
+ * Converts array format to object format and ensures proper structure
+ * 
+ * @param {Array|Object} propsValue - The props configuration to process
+ * @param {Object} _this - Webpack compilation context for warnings
+ * @param {string} key - Source file path for warning messages
+ * @returns {Object} Normalized props configuration object
+ */
 function replacePropsArray(propsValue, _this, key) {
   if (!propsValue) {
     return propsValue;
@@ -196,6 +247,15 @@ function replacePropsArray(propsValue, _this, key) {
   return propsValue;
 }
 
+/**
+ * Validates and normalizes actions configuration for components
+ * Ensures actions follow required format and conventions
+ *
+ * @param {Object} actionsValue - The actions configuration to process
+ * @param {Object} _this - Webpack compilation context for warnings
+ * @param {string} key - Source file path for warning messages
+ * @returns {Object} Validated actions configuration
+ */
 function processActions(actionsValue, _this, key) {
   if (Object.prototype.toString.call(actionsValue) === '[object Object]') {
     Object.keys(actionsValue).forEach(item => {
@@ -221,6 +281,15 @@ function processActions(actionsValue, _this, key) {
   return actionsValue;
 }
 
+/**
+ * Validates that data configuration is in the correct object format
+ * Issues warnings if invalid data format is detected
+ *
+ * @param {Object} dataValue - The data configuration to validate
+ * @param {Object} _this - Webpack compilation context for warnings
+ * @param {string} key - Source file path for warning messages
+ * @returns {Object} The validated data configuration (unchanged if valid)
+ */
 function validateData(dataValue, _this, key) {
   if (dataValue && Object.prototype.toString.call(dataValue) !== '[object Object]') {
     _this.warnings.push({message: 'warnStartWARNING File：' + key +
diff --git a/ace-loader/src/compile-plugin.js b/ace-loader/src/compile-plugin.js
index 1fb3103d95f3cc012f98a3a443f5b0ea75e4ee7f..e2866f4cc5c86e5d3fab4659e68cd517e13079fc 100644
--- a/ace-loader/src/compile-plugin.js
+++ b/ace-loader/src/compile-plugin.js
@@ -40,6 +40,14 @@ let errorCount = 0;
 
 let GLOBAL_COMMON_MODULE_CACHE;
 
+/**
+ * Webpack plugin that manages compilation results, module caching, and asset processing
+ * Handles multiple aspects of the build process including:
+ * - Module discovery and caching
+ * - Common and i18n resource management
+ * - Build result reporting
+ * - Global module caching
+ */
 class ResultStates {
   constructor(options) {
     this.options = options;
@@ -172,6 +180,13 @@ class ResultStates {
   }
 }
 
+/**
+ * Manages cache files for build entries by reading existing cache and updating with new entries
+ * 
+ * @param {string} entryFile - Path to the cache file storing entry paths
+ * @param {string} cachePath - Directory path where cache files are stored
+ * @param {Set} entryPaths - Set containing new entry paths to cache
+ */
 function addCacheFiles(entryFile, cachePath, entryPaths) {
   const entryArray = [];
   if (fs.existsSync(entryFile)) {
@@ -193,6 +208,12 @@ const yellow = '\u001b[33m';
 const blue = '\u001b[34m';
 const reset = '\u001b[39m';
 
+/**
+ * Writes compilation errors to a log file in the build directory
+ * 
+ * @param {string} buildPath - The directory path where the log file should be created
+ * @param {string} content - The error content to write to the log file
+ */
 const writeError = (buildPath, content) => {
   fs.writeFile(path.resolve(buildPath, 'compile_error.log'), content, (err) => {
     if (err) {
@@ -201,6 +222,12 @@ const writeError = (buildPath, content) => {
   });
 };
 
+/**
+ * Prints the final compilation result with detailed error/warning statistics
+ * Handles both regular builds and preview modes with appropriate output formatting
+ * 
+ * @param {string} buildPath - The build directory path for error logging
+ */
 function printResult(buildPath) {
   printWarning();
   printError(buildPath);
@@ -240,10 +267,20 @@ function printResult(buildPath) {
   clearArkCompileStatus();
 }
 
+/**
+ * Resets the Ark compilation status flag to indicate successful compilation
+ * Sets the environment variable 'abcCompileSuccess' to 'true'
+ */
 function clearArkCompileStatus() {
   process.env.abcCompileSuccess = 'true';
 }
 
+/**
+ * Prints the preview build result after checking worker processes
+ * Only displays success message when all worker processes have completed
+ * 
+ * @param {string} resultInfo - Additional result information to display (defaults to empty string)
+ */
 function printPreviewResult(resultInfo = "") {
   let workerNum = Object.keys(cluster.workers).length;
   if (workerNum === 0) {
@@ -251,6 +288,12 @@ function printPreviewResult(resultInfo = "") {
   }
 }
 
+/**
+ * Prints compilation success information to the console with formatted output
+ * Displays either a simple success message or detailed result information
+ * 
+ * @param {Array|Object} resultInfo - Additional success information to display
+ */
 function printSuccessInfo(resultInfo) {
   if (resultInfo.length === 0) {
     console.log(blue, 'COMPILE RESULT:SUCCESS ', reset);
@@ -259,6 +302,10 @@ function printSuccessInfo(resultInfo) {
   }
 }
 
+/**
+ * Processes and prints compilation warnings and notes with formatted output
+ * Handles different types of warning messages with color coding and filtering
+ */
 function printWarning() {
   if (mWarningCount > 0) {
     const warnings = mStats.compilation.warnings;
@@ -283,6 +330,12 @@ function printWarning() {
   }
 }
 
+/**
+ * Formats and prints compilation errors to console and writes to error log file
+ * Handles both custom-formatted errors and standard webpack errors
+ * 
+ * @param {string} buildPath - The build directory path for error logging
+ */
 function printError(buildPath) {
   if (mErrorCount > 0) {
     const errors = mStats.compilation.errors;
@@ -316,6 +369,10 @@ function printError(buildPath) {
   }
 }
 
+/**
+ * Writes a list of operating system-specific files to a tracking file
+ * Maintains a cumulative record of OS-specific files across builds
+ */
 function writeUseOSFiles() {
   let oldInfo = '';
   if (!fs.existsSync(process.env.aceSoPath)) {