Akatsuki-Misaki
/
blivechat
mirror of https://github.com/xfgryujk/blivechat.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化前端打包文件大小

Browse Source
pull/157/head
John Smith 1 year ago
parent 05ce486f46
commit 0f17dfdec7
10 changed files with 75 additions and 90 deletions
Show Stats Download Patch File Download Diff File

8
frontend/babel.config.js
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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',
})
} }
} }

Write Preview
Loading…
Cancel
Save