github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2024-12-26 21:00:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化前端打包文件大小

Browse Source
This commit is contained in:
John Smith 2023-10-08 22:55:12 +08:00
parent 05ce486f46
commit 0f17dfdec7
10 changed files with 75 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/babel.config.js
View File

@ -1,13 +1,5 @@
module.exports = { module.exports = {
presets: [ presets: [
'@vue/cli-plugin-babel/preset' '@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component', {
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
] ]
} }

1
frontend/package.json
View File

@ -24,7 +24,6 @@
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"babel-plugin-component": "^1.1.1",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^9.16.1" "eslint-plugin-vue": "^9.16.1"
}, },

20
frontend/public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="zh">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,6 +8,24 @@
<meta name="referrer" content="no-referrer"> <meta name="referrer" content="no-referrer">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>blivechat</title> <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> </head>
<body> <body>
<noscript> <noscript>

19
frontend/src/App.vue
View File

@ -9,3 +9,22 @@ export default {
name: 'app' name: 'app'
} }
</script> </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>

3
frontend/src/i18n.js
View File

@ -1,4 +1,3 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n' import VueI18n from 'vue-i18n'
import zh from '@/lang/zh' import zh from '@/lang/zh'
@ -6,8 +5,6 @@ import zh from '@/lang/zh'
let lastSetLocale = 'zh' let lastSetLocale = 'zh'
let loadedLocales = ['zh'] let loadedLocales = ['zh']
Vue.use(VueI18n)
export async function setLocale(locale) { export async function setLocale(locale) {
lastSetLocale = locale lastSetLocale = locale
if (loadedLocales.indexOf(locale) === -1) { if (loadedLocales.indexOf(locale) === -1) {

15
frontend/src/layout/index.vue
View File

@ -52,23 +52,10 @@ export default {
</script> </script>
<style> <style>
html { .app-wrapper, .sidebar-container {
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 {
height: 100%; height: 100%;
} }
body {
margin: 0;
background-color: #f6f8fa;
}
a, a:focus, a:hover {
text-decoration: none;
}
.drawer-bg { .drawer-bg {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;

60
frontend/src/main.js
View File

@ -1,61 +1,13 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' 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 axios from 'axios'
import * as i18n from './i18n' import * as i18n from './i18n'
import App from './App' 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' import NotFound from './views/NotFound'
axios.defaults.timeout = 10 * 1000 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 = [ Vue.config.ignoredElements = [
/^yt-/ /^yt-/
] ]
@ -65,23 +17,23 @@ const router = new VueRouter({
routes: [ routes: [
{ {
path: '/', path: '/',
component: Layout, component: () => import('./layout'),
children: [ children: [
{ path: '', name: 'home', component: Home }, { path: '', name: 'home', component: () => import('./views/Home') },
{ path: 'stylegen', name: 'stylegen', component: StyleGenerator }, { path: 'stylegen', name: 'stylegen', component: () => import('./views/StyleGenerator') },
{ path: 'help', name: 'help', component: Help } { path: 'help', name: 'help', component: () => import('./views/Help') }
] ]
}, },
{ {
path: '/room/test', path: '/room/test',
name: 'test_room', name: 'test_room',
component: Room, component: () => import('./views/Room'),
props: route => ({ strConfig: route.query }) props: route => ({ strConfig: route.query })
}, },
{ {
path: '/room/:roomKeyValue', path: '/room/:roomKeyValue',
name: 'room', name: 'room',
component: Room, component: () => import('./views/Room'),
props(route) { props(route) {
let roomKeyType = parseInt(route.query.roomKeyType) || 1 let roomKeyType = parseInt(route.query.roomKeyType) || 1
if (roomKeyType < 1 || roomKeyType > 2) { if (roomKeyType < 1 || roomKeyType > 2) {

25
frontend/src/views/Room.vue
View File

@ -9,10 +9,6 @@ import * as trie from '@/utils/trie'
import * as pronunciation from '@/utils/pronunciation' import * as pronunciation from '@/utils/pronunciation'
import * as chatConfig from '@/api/chatConfig' import * as chatConfig from '@/api/chatConfig'
import * as chat from '@/api/chat' 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 ChatRenderer from '@/components/ChatRenderer'
import * as constants from '@/components/ChatRenderer/constants' import * as constants from '@/components/ChatRenderer/constants'
@ -98,15 +94,26 @@ export default {
document.removeEventListener('visibilitychange', this.onVisibilityChange) document.removeEventListener('visibilitychange', this.onVisibilityChange)
this.init() this.init()
}, },
init() { async init() {
this.initConfig() this.initConfig()
this.initChatClient()
let initChatClientPromise = this.initChatClient()
this.initTextEmoticons() this.initTextEmoticons()
if (this.config.giftUsernamePronunciation !== '') { if (this.config.giftUsernamePronunciation !== '') {
this.pronunciationConverter = new pronunciation.PronunciationConverter() this.pronunciationConverter = new pronunciation.PronunciationConverter()
this.pronunciationConverter.loadDict(this.config.giftUsernamePronunciation) 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({ this.$message({
message: 'Loaded', message: 'Loaded',
@ -159,19 +166,23 @@ export default {
return {} return {}
} }
}, },
initChatClient() { async initChatClient() {
if (this.roomKeyValue === null) { if (this.roomKeyValue === null) {
let ChatClientTest = (await import('@/api/chat/ChatClientTest')).default
this.chatClient = new ChatClientTest() this.chatClient = new ChatClientTest()
} else if (this.config.relayMessagesByServer) { } else if (this.config.relayMessagesByServer) {
let roomKey = { let roomKey = {
type: this.roomKeyType, type: this.roomKeyType,
value: this.roomKeyValue value: this.roomKeyValue
} }
let ChatClientRelay = (await import('@/api/chat/ChatClientRelay')).default
this.chatClient = new ChatClientRelay(roomKey, this.config.autoTranslate) this.chatClient = new ChatClientRelay(roomKey, this.config.autoTranslate)
} else { } else {
if (this.roomKeyType === 1) { if (this.roomKeyType === 1) {
let ChatClientDirectWeb = (await import('@/api/chat/ChatClientDirectWeb')).default
this.chatClient = new ChatClientDirectWeb(this.roomKeyValue) this.chatClient = new ChatClientDirectWeb(this.roomKeyValue)
} else { } else {
let ChatClientDirectOpenLive = (await import('@/api/chat/ChatClientDirectOpenLive')).default
this.chatClient = new ChatClientDirectOpenLive(this.roomKeyValue) this.chatClient = new ChatClientDirectOpenLive(this.roomKeyValue)
} }
} }

5
frontend/src/views/StyleGenerator/index.vue
View File

@ -49,12 +49,13 @@ import _ from 'lodash'
import Legacy from './Legacy' import Legacy from './Legacy'
import LineLike from './LineLike' import LineLike from './LineLike'
import Room from '@/views/Room'
export default { export default {
name: 'StyleGenerator', name: 'StyleGenerator',
components: { components: {
Legacy, LineLike, Room Legacy,
LineLike,
Room: () => import('@/views/Room'),
}, },
data() { data() {
let styleElement = document.createElement('style') let styleElement = document.createElement('style')

9
frontend/vue.config.js
View File

@ -23,5 +23,14 @@ module.exports = {
env['APP_VERSION'] = JSON.stringify(APP_VERSION) env['APP_VERSION'] = JSON.stringify(APP_VERSION)
return args return args
}) })
config.externals({
'element-ui': 'ELEMENT',
lodash: '_',
pako: 'pako',
vue: 'Vue',
'vue-router': 'VueRouter',
'vue-i18n': 'VueI18n',
})
} }
} }