diff --git a/.env.development b/.env.development
index 8f5856db..de583d09 100644
--- a/.env.development
+++ b/.env.development
@@ -3,12 +3,3 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = '/dev-api'
-
-# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
-# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
-# It only does one thing by converting all import() to require().
-# This configuration can significantly increase the speed of hot updates,
-# when you have a large number of pages.
-# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
-
-VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/babel.config.js b/babel.config.js
index e9558405..fb82b271 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,14 @@
 module.exports = {
   presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
+      'plugins': ['dynamic-import-node']
+    }
+  }
 }
diff --git a/package.json b/package.json
index 584ef432..00953524 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "axios": "0.18.1",
+    "babel-plugin-dynamic-import-node": "2.3.3",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
     "core-js": "3.6.5",