优化前端打包文件大小

2024-12-26 12:50:33 +08:00 · 2023-10-08 22:55:12 +08:00 · 2023-10-08 22:55:12 +08:00 · 0f17dfdec7
commit 0f17dfdec7
parent 05ce486f46
10 changed files with 75 additions and 90 deletions
--- 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'
-      }
-    ]
  ]
 }
--- 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"
  },
--- 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>
--- 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>
--- 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) {
--- 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;
--- 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) {
--- 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)
        }
      }
--- 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')
--- 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',
+    })
  }
 }