diff --git a/src/json.js b/src/json.js
index cc7b2ebdf3ea8bf38143f2b46943082206a1e6d7..7772f5dc40b6c2f0f975f6e1ea3c5b7845ad2235 100644
--- a/src/json.js
+++ b/src/json.js
@@ -19,9 +19,9 @@
 
 const path = require('path')
 
-const cardJsonPlugin = require('./cardJson-plugin')
 const transCardArray = require('./templater/bind').transCardArray
 const ResourceReferenceParsing = require('./resource-reference-script')
+
 import { logWarn } from './util'
 
 const REG_EVENT_STRING = /("\s*\$event\..+")|('\s*\$event\..+')/g
@@ -31,170 +31,44 @@ const REG_THIS = /this\..*/g
 module.exports = function (source) {
   this.cacheable && this.cacheable()
 
+  const extName = path.extname(this.resourcePath)
   if (process.env.DEVICE_LEVEL === 'card') {
-    try {
-      source = parseCard(this, source)
-    }
-    catch (e) {
-      logWarn(this, [{
-        reason: 'ERROR: Failed to parse the file : ' + this.resourcePath + `\n${e}`
-      }])
-      return '{}'
-    }
-    return '{}'
-  }
-  return `module.exports = ${source}`
-}
-
-function parseCard(_this, source) {
-  source = source.replace(/\/\*((\n|\r|.)*?)\*\//mg,"")
-  source = source.replace(/(\s|\;|^|\{|\})\/\/.*$/mg,"$1")
-  if (source.trim().indexOf('export default') === 0) {
-    source = source.replace('export default', '')
-  }
-  const extName = path.extname(_this.resourcePath)
-  if (extName === '.json' || extName === '.js') {
-    source = ResourceReferenceParsing(source)
-    source = source.replace(REG_EVENT_STRING, item => {
-      return item.slice(1, -1)
-    })
-    source = source.replace(REG_EVENT, item => {
-      return '"' + item + '"'
-    })
-    source = source.replace(REG_THIS, item => {
-      if (item.charAt(item.length - 1) !== '\"' && item.charAt(item.length - 1) !== '\'' &&
-        item.slice(-2) !== '\"\,' && item.slice(-2) !== '\'\,') {
-          if (item.charAt(item.length - 1) === ',') {
+    source = source.replace(/\/\*((\n|\r|.)*?)\*\//mg, "")
+    source = source.replace(/(\s|\;|^|\{|\})\/\/.*$/mg, "$1")
+    if (extName === '.js' || extName === '.json') {
+      if(source.trim().indexOf('export default') === 0) {
+        source = source.replace('export default', '')
+      }
+      source = ResourceReferenceParsing(source)
+      source = source.replace(REG_EVENT_STRING, item => {
+        return item.slice(1,-1)
+      })
+      source = source.replace(REG_EVENT, item => {
+        return '"' + item + '"'
+      })
+      source = source.replace(REG_THIS, item => {
+        if (item.charAt(item.length-1) !== '\"' && item.charAt(item.length-1) !== '\'' && item.slice(-2) !== '\"\,' && item.slice(-2) !== '\'\,') {
+          if (item.charAt(item.length-1) === ',') {
             item = `"{{${transCardArray(item.slice(0, -1))}}}",`.replace(/this\./g, '')
           } else {
-            item = `"{{${transCardArray(item)}}}"`.replace(/this\./g, '')
+            item = `"{{${transCardArray(item)}}}"`.replace(/this\./g,'')
           }
         }
-      return item
-    })
-  }
-  source = JSON.stringify(eval('(' + source + ')'))
-  const jsonPaths = mkJsonFiles(_this)
-  cardJsonPlugin.compileJson(_this._compiler, 'init', jsonPaths.indexJson)
-  if (jsonPaths.element) {
-    if (extName === '.json' || extName === '.js') {
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson,
-        processActions(JSON.parse(source).actions, _this), jsonPaths.element, 'actions')
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson,
-        validateData(JSON.parse(source).data, _this), jsonPaths.element, 'data')
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson,
-        validateData(JSON.parse(source).apiVersion, _this), jsonPaths.element, 'apiVersion')
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson,
-        replacePropsArray(JSON.parse(source).props, _this), jsonPaths.element, 'props')
-    } else if (extName === '.css' || extName === '.less' || extName === '.sass' || extName === '.scss') {
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson, JSON.parse(source),
-        jsonPaths.element, 'styles')
-    } else if (extName === '.hml') {
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson, JSON.parse(source),
-        jsonPaths.element, 'template')
-    }
-  } else {
-    if (extName === '.json' || extName === '.js') {
-      cardJsonPlugin.compileJson(_this._compiler, 'actions', jsonPaths.indexJson,
-        processActions(JSON.parse(source).actions, _this), 'actions')
-      cardJsonPlugin.compileJson(_this._compiler, 'data', jsonPaths.indexJson,
-        validateData(JSON.parse(source).data, _this), 'data')
-      cardJsonPlugin.compileJson(_this._compiler, 'apiVersion', jsonPaths.indexJson,
-        validateData(JSON.parse(source).apiVersion, _this), 'apiVersion')
-    } else if (extName === '.css' || extName === '.less' || extName === '.sass' || extName === '.scss') {
-      cardJsonPlugin.compileJson(_this._compiler, 'styles', jsonPaths.indexJson, JSON.parse(source), 'styles')
-    } else if (extName === '.hml') {
-      cardJsonPlugin.compileJson(_this._compiler, 'template', jsonPaths.indexJson, JSON.parse(source), 'template')
-    }
-  }
-  return source
-}
-
-function mkJsonFiles(_this) {
-  let indexJson = ''
-  let element
-  const resourceQuery = _this.resourceQuery.split('#');
-  const entrys = _this._compiler.options.entry
-  const resourcePath = _this.resourcePath
-  Object.keys(entrys).forEach(function (key) {
-    if (path.dirname(path.resolve(entrys[key]['import'][0])) === path.dirname(resourcePath)) {
-      indexJson = key + '.json'
-    } else {
-      indexJson = key + '.json'
-      element = resourceQuery[0].slice(1)
-    }
-  })
-  indexJson = path.resolve(_this._compiler.options.output.path, indexJson)
-  return { indexJson: indexJson, element: element }
-}
-
-function replacePropsArray(propsValue, _this) {
-  if (!propsValue) {
-    return propsValue
-  }
-  if (Array.isArray(propsValue)) {
-    const propsObject = {}
-    propsValue.forEach(item => {
-      if (typeof(item) !== 'string') {
-        logWarn(_this, [{
-          reason: `WARNING: The props value type should be 'string', not '${typeof(item)}' in props array in custom elements.`
-        }])
-      }
-      propsObject[item] = { 'default': '' }
-    })
-    propsValue = propsObject
-  } else if (Object.prototype.toString.call(propsValue) === '[object Object]') {
-    Object.keys(propsValue).forEach(item => {
-      if (Object.prototype.toString.call(propsValue[item]) !== '[object Object]') {
-        logWarn(_this, [{
-          reason: 'WARNING: The props default value type can only be Object in custom elements.'
-        }])
-      }
-      if (!propsValue[item].hasOwnProperty('default')) {
-        propsValue[item] = { 'default': '' }
-      }
-    })
-  } else {
-    logWarn(_this, [{
-      reason: 'WARNING: The props type can only be Array or Object in custom elements.'
-    }])
-  }
-  return propsValue
-}
-
-function processActions(actionsValue, _this) {
-  if (Object.prototype.toString.call(actionsValue) === '[object Object]') {
-    Object.keys(actionsValue).forEach(item => {
-      if (actionsValue[item].method) {
-        if (typeof(actionsValue[item].method) === 'string') {
-          if (actionsValue[item].method.toLowerCase() !== actionsValue[item].method) {
-            logWarn(_this, [{
-              reason: `WARNING: The key method '${actionsValue[item].method}' in the actions don't support uppercase letters.`
-            }])
-            actionsValue[item].method = actionsValue[item].method.toLowerCase()
-          }
-        } else {
-          logWarn(_this, [{
-            reason: `WARNING: The key method type in the actions should be 'string', not '${typeof(actionsValue[item].method)}'.`
+        return item
+      })
+      if (extName === '.js') {
+        try {
+          source = JSON.stringify(eval('(' + source + ')'))
+        } catch (e) {
+          logWarn(this, [{
+            reason: 'ERROR: Failed to parse the file : ' + this.resourcePath + `\n${e}`
           }])
+          return `{}`
         }
+      } else {
+        return source
       }
-    })
-  } else {
-    if (actionsValue) {
-      logWarn(_this, [{
-        reason: 'WARNING: The actions value type can only be Object.'
-      }])
     }
   }
-  return actionsValue
-}
-
-function validateData(dataValue, _this) {
-  if (dataValue && Object.prototype.toString.call(dataValue) !== '[object Object]') {
-    logWarn(_this, [{
-      reason: 'WARNING: The data value type can only be Object.'
-    }])
-  }
-  return dataValue
+  return `module.exports = ${source}`
 }
diff --git a/src/loader.js b/src/loader.js
index 1ca9b4d8be20140aeacca796930a8bc54a1ca3a9..359d4041e800e707d2323af575d38fce8e9512e1 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -181,7 +181,7 @@ function loader (source) {
   const isEntry = resourceQuery.entry
   const dirName = path.parse(this.resourcePath)
   const name = isEntry ? dirName.name : resourceQuery.name || getNameByPath(this.resourcePath)
-  if (isReservedTag(name)) {
+  if (isReservedTag(name) && process.env.abilityType === 'page') {
     logWarn(this, [{
       reason: 'ERROR: The file name cannot contain reserved tag name: ' + name
     }])
@@ -195,10 +195,7 @@ function loader (source) {
 }
 
 function checkApp(_this) {
-  return ["app.js", "data.js", "service.js"].some(item => {
-    const type = item === "app.js" ? "page" : item === "data.js" ? "data" : item === "service.js" ? "service" : item;
-    return _this.resourcePath.indexOf(item) > 0 && process.env.abilityType === type
-  })
+  return _this.resourcePath.indexOf(process.env.abilityType === 'page' ? 'app.js' : `${process.env.abilityType}.js`) > 0
 }
 
 function loadApp (_this, name, isEntry, customLang) {
diff --git a/src/script.js b/src/script.js
index 5410b72d7c874d365fd079269b8df3565579e4ea..ad985510d16f822da8e4c314367682b88318bc5e 100644
--- a/src/script.js
+++ b/src/script.js
@@ -41,7 +41,8 @@ module.exports = function (source, map) {
       }
       parsed = parseRequireModule(parsed)
       if (process.env.DEVICE_LEVEL === DEVICE_LEVEL.RICH) {
-        if (!["app.js","data.js","service.js"].includes(path.basename(this.resourcePath))) {
+        const appName = process.env.abilityType === 'page' ? 'app.js' : `${process.env.abilityType}.js`
+        if (path.basename(this.resourcePath) !== appName) {
           parsed += `\nvar moduleOwn = exports.default || module.exports;\nvar accessors = ['public', 'protected', 'private'];
 if (moduleOwn.data && accessors.some(function (acc) {
     return moduleOwn[acc];
diff --git a/src/util.js b/src/util.js
index dfc6f7922829b2b2b9dbcdfcfb8e77ebd616e043..97a9b8cc8ca6341aa79082846866103113d39ed3 100644
--- a/src/util.js
+++ b/src/util.js
@@ -238,6 +238,10 @@ function requireModule(moduleName) {
     return target;
   }
   var shortName = moduleName.replace(/@[^.]+\.([^.]+)/, '$1');
+  target = requireNapi(shortName);
+  if (target !== 'undefined' && /@ohos/.test(moduleName)) {
+    return target;
+  }
   if (typeof ohosplugin !== 'undefined' && /@ohos/.test(moduleName)) {
     target = ohosplugin;
     for (let key of shortName.split('.')) {
@@ -262,7 +266,6 @@ function requireModule(moduleName) {
       return target;
     }
   }
-  target = requireNapi(shortName);
   return target;
 }
 `
@@ -287,8 +290,9 @@ function requireModule(moduleName) {
   return source
 }
 
-export function jsonLoaders (type, customLoader) {
+export function jsonLoaders (type, customLoader, isVisual, queryType) {
   let loaders = []
+
   switch (type) {
     case "template":
       loaders = [{
@@ -318,5 +322,15 @@ export function jsonLoaders (type, customLoader) {
       name: path.resolve(__dirname, `../node_modules/${customLoader}`)
     })
   }
+
+  if (isVisual) {
+    loaders.push({
+      name: path.resolve(__dirname, 'extgen.js'),
+      query: {
+        type: queryType
+      }
+    })
+  }
+  
   return stringifyLoaders(loaders)
 }