diff --git a/build/build-locale.js b/build/build-locale.js
index 7b0404a332..db8e5f9f3f 100644
--- a/build/build-locale.js
+++ b/build/build-locale.js
@@ -30,7 +30,7 @@ fileList
           .replace('define(\"', 'define(\"element/locale/')
           .replace(
             /global\.(\S*) = mod.exports/,
-            'global.ELEMENT.lang = global.ELEMENT.lang || {};\n    global.ELEMENT.lang.$1 = mod.exports.default'
+            'global.ElementPlus.lang = global.ElementPlus.lang || {};\n    global.ElementPlus.lang.$1 = mod.exports.default'
           )
 
         save(resolve(__dirname, '../lib/umd/locale', `${name}.js`)).write(transformedCode)
diff --git a/build/webpack.config.js b/build/webpack.config.js
index 26d6f52d18..b737bb0178 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
+const webpack = require('webpack')
 const { VueLoaderPlugin } = require('vue-loader')
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
@@ -14,6 +15,11 @@ let externals = [
     },
   },
 ]
+const plugins = [
+  new VueLoaderPlugin(),
+  // new BundleAnalyzerPlugin(),
+]
+let entry = [path.resolve(__dirname, '../packages/element-plus/index.ts')]
 if (!isFullMode) {
   externals.push({
     '@popperjs/core': '@popperjs/core',
@@ -24,11 +30,13 @@ if (!isFullMode) {
   },
   /^dayjs.*/,
   /^lodash.*/)
+} else {
+  entry.push(path.resolve(__dirname, '../packages/element-plus/full.ts'))
 }
 
 const config = {
   mode: 'production',
-  entry: path.resolve(__dirname, '../packages/element-plus/index.ts'),
+  entry,
   output: {
     path: path.resolve(__dirname, '../lib'),
     publicPath: '/',
@@ -55,10 +63,7 @@ const config = {
     extensions: ['.ts', '.tsx', '.js', '.json'],
   },
   externals,
-  plugins: [
-    new VueLoaderPlugin(),
-    // new BundleAnalyzerPlugin(),
-  ],
+  plugins,
 }
 
 module.exports = config
diff --git a/packages/element-plus/full.ts b/packages/element-plus/full.ts
new file mode 100644
index 0000000000..3e6dd8d2b8
--- /dev/null
+++ b/packages/element-plus/full.ts
@@ -0,0 +1,4 @@
+import dayjs from 'dayjs'
+
+// expose Day.js to window to make full bundle i18n work
+(window as any).dayjs = dayjs
diff --git a/website/docs/en-US/i18n.md b/website/docs/en-US/i18n.md
index acfaf93c6e..9bad6c3717 100644
--- a/website/docs/en-US/i18n.md
+++ b/website/docs/en-US/i18n.md
@@ -10,11 +10,22 @@ import 'dayjs/locale/zh-cn'
 
 createApp(App).use(ElementPlus, { locale })
 ```
-
-Or if you are importing Element Plus on demand:
+if you are importing Element Plus on demand via **es modules**:
 
 ```typescript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/zh-cn'
+import 'dayjs/locale/zh-cn'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+Or if you are importing Element Plus on demand via [babel-plugin-component](#/en-US/component/quickstart#on-demand):
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import 'dayjs/locale/zh-cn'
@@ -24,8 +35,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)
 
 // import components
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```
 
 ### Set Day.js locale
@@ -190,41 +201,41 @@ app.use(i18n)
 ### Import via CDN
 
 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/dayjs/locale/zh-cn.js"></script>
 
 <script>
-  ELEMENT.locale(ELEMENT.lang.zhCn)
+  ElementPlus.locale(ElementPlus.lang.zhCn)
 </script>
 ```
 
 Compatible with `vue-i18n`
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@next"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
 
 <script>
   const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
     messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
         // el property is critical, set this in order for ElementPlus translate strings correctly.
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
         // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
         // Because that makes the ElementPlus internal translation invalid.
         message: {
           hello: 'hello world',
         },
       },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
         // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
         // Because that makes the ElementPlus internal translation invalid.
         message: {
diff --git a/website/docs/es/i18n.md b/website/docs/es/i18n.md
index ae167e64d3..52db22b517 100644
--- a/website/docs/es/i18n.md
+++ b/website/docs/es/i18n.md
@@ -11,10 +11,22 @@ import 'dayjs/locale/es'
 createApp(App).use(ElementPlus, { locale })
 ```
 
-O si está importando Element Plus a petición:
+O si está importando Element Plus a petición via **es modules**:
 
 ```typescript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/es'
+import 'dayjs/locale/es'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+O si está importando Element Plus a petición via [babel-plugin-component](#/es/component/quickstart#on-demand):
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/es'
 import 'dayjs/locale/es'
@@ -24,8 +36,8 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)
 
 // import components
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```
 
 ### Set Day.js locale
@@ -193,42 +205,42 @@ app.use(i18n)
 ### Importar via CDN
 
 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/es.js"></script>
 <script src="//unpkg.com/dayjs/locale/es.js"></script>
 
 <script>
-  ELEMENT.locale(ELEMENT.lang.es)
+  ElementPlus.locale(ElementPlus.lang.es)
 </script>
 ```
 
 Compatible con `vue-i18n`
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@next"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
 
 <script>
   // Need translation
   const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
     messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
         // el property is critical, set this in order for ElementPlus translate strings correctly.
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
         // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
         // Because that makes the ElementPlus internal translation invalid.
         message: {
           hello: 'hello world',
         },
       },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
         // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
         // Because that makes the ElementPlus internal translation invalid.
         message: {
diff --git a/website/docs/fr-FR/i18n.md b/website/docs/fr-FR/i18n.md
index 46007a9b1c..af45ab5cdc 100644
--- a/website/docs/fr-FR/i18n.md
+++ b/website/docs/fr-FR/i18n.md
@@ -11,21 +11,33 @@ import 'dayjs/locale/fr'
 createApp(App).use(ElementPlus, { locale })
 ```
 
-Ou si vous importez Element Plus à la demande:
+Ou si vous importez Element Plus à la demande via **es modules**:
 
 ```typescript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/fr'
+import 'dayjs/locale/fr'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+Ou si vous importez Element Plus à la demande via [babel-plugin-component](#/fe-FR/component/quickstart#on-demand):
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/fr'
 import 'dayjs/locale/fr'
 import locale from 'element-plus/lib/locale'
 
-// configure la langue
+// configure language
 locale.use(lang)
 
-// importe les composants
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+// import components
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```
 
 ### Set Day.js locale
@@ -192,28 +204,42 @@ app.use(i18n)
 ### Import via un CDN
 
 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/fr.js"></script>
 <script src="//unpkg.com/dayjs/locale/fr.js"></script>
 
+<script>
+  ElementPlus.locale(ElementPlus.lang.fr)
+</script>
+```
+
+Compatible avec `vue-i18n`
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
+<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
+
 <script>
   // Need translation
   const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
     messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
         // el property is critical, set this in order for ElementPlus translate strings correctly.
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
         // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
         // Because that makes the ElementPlus internal translation invalid.
         message: {
           hello: 'hello world',
         },
       },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
         // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
         // Because that makes the ElementPlus internal translation invalid.
         message: {
@@ -232,21 +258,6 @@ app.use(i18n)
 </script>
 ```
 
-Compatible avec `vue-i18n`
-
-```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
-<script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
-<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
-
-<script>
-  Vue.locale('en', ELEMENT.lang.en)
-  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
-</script>
-```
-
 Actuellement, Element Plus supporte les langues suivantes:
 
 <ul class="language-list">
diff --git a/website/docs/jp/i18n.md b/website/docs/jp/i18n.md
index 2ecfb800ef..6e4bef7498 100644
--- a/website/docs/jp/i18n.md
+++ b/website/docs/jp/i18n.md
@@ -11,10 +11,22 @@ import locale from 'element-plus/lib/locale/lang/ja'
 createApp(App).use(ElementPlus, { locale })
 ```
 
-または Element Plus をインポートする際は必要に応じて以下の記述します。:
+if you are importing Element Plus on demand via **es modules**:
 
 ```typescript
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/ja'
+import 'dayjs/locale/ja'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+Or if you are importing Element Plus on demand via [babel-plugin-component](#/jp/component/quickstart#on-demand):
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/ja'
 import 'dayjs/locale/ja'
@@ -24,10 +36,11 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)
 
 // import components
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```
 
+
 ### Set Day.js locale
 
 Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
@@ -196,41 +209,41 @@ app.use(i18n)
 ### CDN を経由してインポート
 
 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
-<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
+<script src="//unpkg.com/element-plus/lib/umd/locale/jp.js"></script>
 
 <script>
-  ELEMENT.locale(ELEMENT.lang.en)
+  ElementPlus.locale(ElementPlus.lang.jp)
 </script>
 ```
 
 `vue-i18n` との互換性
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@next"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
 
 <script>
   // need translation
   const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
     messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
         // el property is critical, set this in order for ElementPlus translate strings correctly.
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
         // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
         // Because that makes the ElementPlus internal translation invalid.
         message: {
           hello: 'hello world',
         },
       },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
         // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
         // Because that makes the ElementPlus internal translation invalid.
         message: {
diff --git a/website/docs/zh-CN/i18n.md b/website/docs/zh-CN/i18n.md
index e3fffdbcd1..11968fce0d 100644
--- a/website/docs/zh-CN/i18n.md
+++ b/website/docs/zh-CN/i18n.md
@@ -1,9 +1,8 @@
 ## 国际化
 
-Element Plus 组件内部默认使用英语，若希望使用其他语言，则需要进行多语言设置。以中文为例，在 main.js 中：
+Element Plus 组件内部默认使用英语，若希望使用其他语言，则需要进行多语言设置。以中文为例，在 main.js 中，如果是完整引入 Element Plus：
 
 ```javascript
-// 完整引入 Element
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'dayjs/locale/zh-cn'
@@ -12,11 +11,22 @@ import locale from 'element-plus/lib/locale/lang/zh-cn'
 createApp(App).use(ElementPlus, { locale })
 ```
 
-或
+如果是通过 **es modules** 按需引入 Element Plus:
 
-```javascript
-// 按需引入 Element
-import Vue from 'vue'
+```typescript
+import { createApp } from 'vue'
+import { ElButton, locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/zh-cn'
+import 'dayjs/locale/zh-cn'
+
+locale(lang)
+createApp(App).component(ElButton.name, ElButton)
+```
+
+如果是通过 [babel-plugin-component](#/zh-CN/component/quickstart#on-demand) 插件按需引入 Element Plus:
+
+```typescript
+import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus'
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import 'dayjs/locale/zh-cn'
@@ -26,10 +36,11 @@ import locale from 'element-plus/lib/locale'
 locale.use(lang)
 
 // 引入组件
-Vue.component(ElButton.name, ElButton)
-Vue.component(ElSelect.name, ElSelect)
+createApp(App).component(ElButton.name, ElButton)
+createApp(App).component(ElSelect.name, ElSelect)
 ```
 
+
 ### 设置 Day.js 国际化
 
 Element Plus 直接使用了 [Day.js](https://day.js.org/) 项目的时间日期国际化设置，如月份名称、每周第一天是周几等。并且会自动全局设置已经导入的 Day.js 国际化配置。
@@ -188,40 +199,40 @@ app.use(i18n)
 ### 通过 CDN 的方式加载语言文件
 
 ```html
-<script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/es.js"></script>
 <script src="//unpkg.com/dayjs/locale/zh-cn.js"></script>
 
 <script>
-  ELEMENT.locale(ELEMENT.lang.zhCn)
+  ElementPlus.locale(ElementPlus.lang.zhCn)
 </script>
 ```
 
 搭配 `vue-i18n` 使用
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@next"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-plus"></script>
+<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
 <script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
 
 <script>
   const i18n = Vue18n.createI18n({
-    locale: Element.lang.zhCN.name,
-    fallbackLocale: Element.lang.en.name,
+    locale: ElementPlus.lang.zhCN.name,
+    fallbackLocale: ElementPlus.lang.en.name,
     messages: {
-      [ELEMENT.lang.en.name]: {
+      [ElementPlus.lang.en.name]: {
         // el 这个属性很关键，一定要保证有这个属性，
-        el: ELEMENT.lang.en.el,
+        el: ElementPlus.lang.en.el,
         // 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
         message: {
           hello: 'hello world',
         },
       },
-      [ELEMENT.lang.zhCN.name]: {
-        el: ELEMENT.lang.zhCN.el,
+      [ElementPlus.lang.zhCN.name]: {
+        el: ElementPlus.lang.zhCN.el,
         // 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
         message: {
           hello: '你好，世界',