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 = {
presets: [
'@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-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"
},

20
frontend/public/index.html
Unescape Escape View File

@ -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>

19
frontend/src/App.vue
Unescape Escape View File

@ -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>

3
frontend/src/i18n.js
Unescape Escape View File

@ -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) {

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

@ -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;

60
frontend/src/main.js
Unescape Escape View File

@ -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) {

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 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)
}
}

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

@ -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')

9
frontend/vue.config.js
Unescape Escape View File

@ -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',
})
}
}

Write Preview
Loading…
Cancel
Save