diff --git a/frontend/babel.config.js b/frontend/babel.config.js
index 3de35ba..e955840 100644
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -1,13 +1,5 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ],
-  plugins: [
-    [
-      'component', {
-        'libraryName': 'element-ui',
-        'styleLibraryName': 'theme-chalk'
-      }
-    ]
   ]
 }
diff --git a/frontend/package.json b/frontend/package.json
index 9ef465d..f23fb4f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,7 +24,6 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "babel-plugin-component": "^1.1.1",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^9.16.1"
   },
diff --git a/frontend/public/index.html b/frontend/public/index.html
index b564335..30e2c34 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,6 +8,24 @@
     <meta name="referrer" content="no-referrer">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>blivechat</title>
+
+    <% if (process.env.NODE_ENV === 'production') { %>
+      <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.runtime.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.6.5/vue-router.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.28.2/vue-i18n.min.js"></script>
+      <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
+      <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/pako/2.1.0/pako_inflate.min.js"></script>
+    <% } else { %>
+      <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.runtime.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.6.5/vue-router.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.28.2/vue-i18n.js"></script>
+      <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.css" rel="stylesheet">
+      <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.js"></script>
+      <script src="https://cdn.bootcdn.net/ajax/libs/pako/2.1.0/pako_inflate.js"></script>
+    <% } %>
   </head>
   <body>
     <noscript>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 76bb961..ff365f4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,3 +9,22 @@ export default {
   name: 'app'
 }
 </script>
+
+<style>
+html {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE \8F6F \96C5 \9ED1 ", "微软雅黑", Arial, sans-serif;
+}
+
+html, body, #app {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background-color: #f6f8fa;
+}
+
+a, a:focus, a:hover {
+  text-decoration: none;
+}
+</style>
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
index 7557c36..22c4af2 100644
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
 import zh from '@/lang/zh'
@@ -6,8 +5,6 @@ import zh from '@/lang/zh'
 let lastSetLocale = 'zh'
 let loadedLocales = ['zh']
 
-Vue.use(VueI18n)
-
 export async function setLocale(locale) {
   lastSetLocale = locale
   if (loadedLocales.indexOf(locale) === -1) {
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index e4cbd7a..60e94f1 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -52,23 +52,10 @@ export default {
 </script>
 
 <style>
-html {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE \8F6F \96C5 \9ED1 ", "微软雅黑", Arial, sans-serif;
-}
-
-html, body, #app, .app-wrapper, .sidebar-container {
+.app-wrapper, .sidebar-container {
   height: 100%;
 }
 
-body {
-  margin: 0;
-  background-color: #f6f8fa;
-}
-
-a, a:focus, a:hover {
-  text-decoration: none;
-}
-
 .drawer-bg {
   background: #000;
   opacity: 0.3;
diff --git a/frontend/src/main.js b/frontend/src/main.js
index bf380e1..fa23bc4 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,61 +1,13 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import {
-  Alert, Aside, Autocomplete, Badge, Button, ButtonGroup, Card, Col, ColorPicker, Container, Divider, Form, FormItem, Image,
-  Input, Link, Main, Menu, MenuItem, Message, Option, OptionGroup, Radio, RadioGroup, Row, Select, Scrollbar,
-  Slider, Submenu, Switch, Table, TableColumn, TabPane, Tabs, Tooltip
-} from 'element-ui'
 import axios from 'axios'
 
 import * as i18n from './i18n'
 import App from './App'
-import Layout from './layout'
-import Home from './views/Home'
-import StyleGenerator from './views/StyleGenerator'
-import Help from './views/Help'
-import Room from './views/Room'
 import NotFound from './views/NotFound'
 
 axios.defaults.timeout = 10 * 1000
 
-Vue.use(VueRouter)
-// 初始化element
-Vue.use(Alert)
-Vue.use(Aside)
-Vue.use(Autocomplete)
-Vue.use(Badge)
-Vue.use(Button)
-Vue.use(ButtonGroup)
-Vue.use(Card)
-Vue.use(Col)
-Vue.use(ColorPicker)
-Vue.use(Container)
-Vue.use(Divider)
-Vue.use(Form)
-Vue.use(FormItem)
-Vue.use(Image)
-Vue.use(Input)
-Vue.use(Link)
-Vue.use(Main)
-Vue.use(Menu)
-Vue.use(MenuItem)
-Vue.use(Option)
-Vue.use(OptionGroup)
-Vue.use(Radio)
-Vue.use(RadioGroup)
-Vue.use(Row)
-Vue.use(Select)
-Vue.use(Scrollbar)
-Vue.use(Slider)
-Vue.use(Submenu)
-Vue.use(Switch)
-Vue.use(Table)
-Vue.use(TableColumn)
-Vue.use(TabPane)
-Vue.use(Tabs)
-Vue.use(Tooltip)
-Vue.prototype.$message = Message
-
 Vue.config.ignoredElements = [
   /^yt-/
 ]
@@ -65,23 +17,23 @@ const router = new VueRouter({
   routes: [
     {
       path: '/',
-      component: Layout,
+      component: () => import('./layout'),
       children: [
-        { path: '', name: 'home', component: Home },
-        { path: 'stylegen', name: 'stylegen', component: StyleGenerator },
-        { path: 'help', name: 'help', component: Help }
+        { path: '', name: 'home', component: () => import('./views/Home') },
+        { path: 'stylegen', name: 'stylegen', component: () => import('./views/StyleGenerator') },
+        { path: 'help', name: 'help', component: () => import('./views/Help') }
       ]
     },
     {
       path: '/room/test',
       name: 'test_room',
-      component: Room,
+      component: () => import('./views/Room'),
       props: route => ({ strConfig: route.query })
     },
     {
       path: '/room/:roomKeyValue',
       name: 'room',
-      component: Room,
+      component: () => import('./views/Room'),
       props(route) {
         let roomKeyType = parseInt(route.query.roomKeyType) || 1
         if (roomKeyType < 1 || roomKeyType > 2) {
diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue
index 6107d31..b307f47 100644
--- a/frontend/src/views/Room.vue
+++ b/frontend/src/views/Room.vue
@@ -9,10 +9,6 @@ import * as trie from '@/utils/trie'
 import * as pronunciation from '@/utils/pronunciation'
 import * as chatConfig from '@/api/chatConfig'
 import * as chat from '@/api/chat'
-import ChatClientTest from '@/api/chat/ChatClientTest'
-import ChatClientDirectWeb from '@/api/chat/ChatClientDirectWeb'
-import ChatClientDirectOpenLive from '@/api/chat/ChatClientDirectOpenLive'
-import ChatClientRelay from '@/api/chat/ChatClientRelay'
 import ChatRenderer from '@/components/ChatRenderer'
 import * as constants from '@/components/ChatRenderer/constants'
 
@@ -98,15 +94,26 @@ export default {
       document.removeEventListener('visibilitychange', this.onVisibilityChange)
       this.init()
     },
-    init() {
+    async init() {
       this.initConfig()
-      this.initChatClient()
+
+      let initChatClientPromise = this.initChatClient()
       this.initTextEmoticons()
       if (this.config.giftUsernamePronunciation !== '') {
         this.pronunciationConverter = new pronunciation.PronunciationConverter()
         this.pronunciationConverter.loadDict(this.config.giftUsernamePronunciation)
       }
 
+      try {
+        await initChatClientPromise
+      } catch (e) {
+        this.$message.error({
+          message: `Failed to load: ${e}`,
+          duration: 10 * 1000
+        })
+        throw e
+      }
+
       // 提示用户已加载
       this.$message({
         message: 'Loaded',
@@ -159,19 +166,23 @@ export default {
         return {}
       }
     },
-    initChatClient() {
+    async initChatClient() {
       if (this.roomKeyValue === null) {
+        let ChatClientTest = (await import('@/api/chat/ChatClientTest')).default
         this.chatClient = new ChatClientTest()
       } else if (this.config.relayMessagesByServer) {
         let roomKey = {
           type: this.roomKeyType,
           value: this.roomKeyValue
         }
+        let ChatClientRelay = (await import('@/api/chat/ChatClientRelay')).default
         this.chatClient = new ChatClientRelay(roomKey, this.config.autoTranslate)
       } else {
         if (this.roomKeyType === 1) {
+          let ChatClientDirectWeb = (await import('@/api/chat/ChatClientDirectWeb')).default
           this.chatClient = new ChatClientDirectWeb(this.roomKeyValue)
         } else {
+          let ChatClientDirectOpenLive = (await import('@/api/chat/ChatClientDirectOpenLive')).default
           this.chatClient = new ChatClientDirectOpenLive(this.roomKeyValue)
         }
       }
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index 6731338..5f318d7 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/frontend/src/views/StyleGenerator/index.vue
@@ -49,12 +49,13 @@ import _ from 'lodash'
 
 import Legacy from './Legacy'
 import LineLike from './LineLike'
-import Room from '@/views/Room'
 
 export default {
   name: 'StyleGenerator',
   components: {
-    Legacy, LineLike, Room
+    Legacy,
+    LineLike,
+    Room: () => import('@/views/Room'),
   },
   data() {
     let styleElement = document.createElement('style')
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index b1053ec..8d76b39 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -23,5 +23,14 @@ module.exports = {
         env['APP_VERSION'] = JSON.stringify(APP_VERSION)
         return args
       })
+
+    config.externals({
+      'element-ui': 'ELEMENT',
+      lodash: '_',
+      pako: 'pako',
+      vue: 'Vue',
+      'vue-router': 'VueRouter',
+      'vue-i18n': 'VueI18n',
+    })
   }
 }
