Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[Client] Enable code splitting

Browse source 
And some optimizations
This commit is contained in:
syuilo 2018-11-12 04:09:02 +09:00
parent 0b40194d31
commit b1b02d0e32
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
10 changed files with 82 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
gulpfile.ts
View file

@ -57,16 +57,7 @@ gulp.task('build:copy:views', () =>
gulp.src('./src/server/web/views/**/*').pipe(gulp.dest('./built/server/web/views'))
);
// 互換性のため
gulp.task('build:copy:lang', () =>
gulp.src(['./built/client/assets/*.*-*.js'])
.pipe(rename(path => {
path.basename = path.basename.replace(/\-(.*)$/, '');
}))
.pipe(gulp.dest('./built/client/assets/'))
);
gulp.task('build:copy', ['build:copy:views', 'build:copy:lang'], () =>
gulp.task('build:copy', ['build:copy:views'], () =>
gulp.src([
'./build/Release/crypto_key.node',
'./src/const.json',

2
package.json
View file

@ -99,6 +99,7 @@
"commander": "2.19.0",
"crc-32": "1.2.0",
"css-loader": "1.0.1",
"cssnano": "4.1.7",
"dateformat": "3.0.3",
"debug": "4.1.0",
"deep-equal": "1.0.1",
@ -167,6 +168,7 @@
"os-utils": "0.0.14",
"parse5": "5.1.0",
"portscanner": "2.2.0",
"postcss-loader": "3.0.0",
"progress-bar-webpack-plugin": "1.11.0",
"promise-limit": "2.7.0",
"promise-sequential": "1.1.1",

12
src/client/app/common/scripts/get-md5.ts
View file

@ -1,8 +1,10 @@
const crypto = require('crypto');
// スクリプトサイズがデカい
//const crypto = require('crypto');
export default (data: ArrayBuffer) => {
const buf = new Buffer(data);
const hash = crypto.createHash("md5");
hash.update(buf);
return hash.digest("hex");
//const buf = new Buffer(data);
//const hash = crypto.createHash("md5");
//hash.update(buf);
//return hash.digest("hex");
return '';
};

11
src/client/app/common/views/components/emoji.vue
View file

@ -7,7 +7,8 @@
<script lang="ts">
import Vue from 'vue';
import { lib } from 'emojilib';
// スクリプトサイズがデカい
//import { lib } from 'emojilib';
export default Vue.extend({
props: {
@ -50,10 +51,10 @@ export default Vue.extend({
this.customEmoji = customEmoji;
this.url = customEmoji.url;
} else {
const emoji = lib[this.name];
if (emoji) {
this.char = emoji.char;
}
//const emoji = lib[this.name];
//if (emoji) {
// this.char = emoji.char;
//}
}
} else {
this.char = this.emoji;

5
src/client/app/common/views/directives/autocomplete.ts
View file

@ -1,5 +1,4 @@
import * as getCaretCoordinates from 'textarea-caret';
import MkAutocomplete from '../components/autocomplete.vue';
import { toASCII } from 'punycode';
export default {
@ -123,7 +122,7 @@ class Autocomplete {
/**
* サジェストを提示します。
*/
private open(type, q) {
private async open(type, q) {
if (type != this.currentType) {
this.close();
}
@ -143,6 +142,8 @@ class Autocomplete {
this.suggestion.y = y;
this.suggestion.q = q;
} else {
const MkAutocomplete = await import('../components/autocomplete.vue').then(m => m.default);
// サジェスト要素作成
this.suggestion = new MkAutocomplete({
parent: this.vm,

2
src/client/app/desktop/views/components/game-window.vue
View file

@ -13,7 +13,7 @@ import { url } from '../../../config';
export default Vue.extend({
i18n: i18n('desktop/views/components/game-window.vue'),
components: {
XReversi: () => import('../../../common/views/components/games/reversi/reversi.vue')
XReversi: () => import('../../../common/views/components/games/reversi/reversi.vue').then(m => m.default)
},
data() {
return {

2
src/client/app/desktop/views/pages/games/reversi.vue
View file

@ -9,7 +9,7 @@ import Vue from 'vue';
export default Vue.extend({
components: {
XReversi: () => import('../../../../common/views/components/games/reversi/reversi.vue')
XReversi: () => import('../../../../common/views/components/games/reversi/reversi.vue').then(m => m.default)
},
props: {
ui: {

2
src/client/app/mobile/views/pages/games/reversi.vue
View file

@ -12,7 +12,7 @@ import i18n from '../../../../i18n';
export default Vue.extend({
i18n: i18n('mobile/views/pages/games/reversi.vue'),
components: {
XReversi: () => import('../../../../common/views/components/games/reversi/reversi.vue')
XReversi: () => import('../../../../common/views/components/games/reversi/reversi.vue').then(m => m.default)
},
mounted() {
document.title = `${this.$root.instanceName} %i18n:@reversi%`;

2
src/client/app/tsconfig.json
View file

@ -10,7 +10,7 @@
"declaration": false,
"sourceMap": false,
"target": "es2017",
"module": "commonjs",
"module": "esnext",
"removeComments": false,
"noLib": false,
"strict": true,

146
webpack.config.ts
View file

@ -17,82 +17,28 @@ const meta = require('./package.json');
const version = meta.clientVersion;
const codename = meta.codename;
const langs = Object.keys(locales);
const isProduction = process.env.NODE_ENV == 'production';
// Entries
const entry = {
desktop: './src/client/app/desktop/script.ts',
mobile: './src/client/app/mobile/script.ts',
dev: './src/client/app/dev/script.ts',
auth: './src/client/app/auth/script.ts',
admin: './src/client/app/admin/script.ts',
sw: './src/client/app/sw.js'
const postcss = {
loader: 'postcss-loader',
options: {
plugins: [
require('cssnano')({
preset: 'default'
})
]
},
};
const output = {
path: __dirname + '/built/client/assets',
filename: `[name].${version}.-.js`
};
//#region Define consts
const consts = {
_THEME_COLOR_: constants.themeColor,
_COPYRIGHT_: constants.copyright,
_VERSION_: meta.version,
_CLIENT_VERSION_: version,
_CODENAME_: codename,
_LANG_: '%lang%',
_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
_LOCALE_: '%locale%',
_ENV_: process.env.NODE_ENV
};
const _consts: { [ key: string ]: any } = {};
Object.keys(consts).forEach(key => {
_consts[key] = JSON.stringify((consts as any)[key]);
});
//#endregion
const plugins = [
//new HardSourceWebpackPlugin(),
new ProgressBarPlugin({
format: chalk` {cyan.bold yes we can} {bold [}:bar{bold ]} {green.bold :percent} {gray (:current/:total)} :elapseds`,
clear: false
}),
new webpack.DefinePlugin(_consts),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
}),
new WebpackOnBuildPlugin((stats: any) => {
fs.writeFileSync('./built/client/meta.json', JSON.stringify({
version
}), 'utf-8');
//#region i18n
langs.forEach(lang => {
Object.keys(entry).forEach(file => {
let src = fs.readFileSync(`${__dirname}/built/client/assets/${file}.${version}.-.js`, 'utf-8');
src = src.replace('%lang%', lang);
src = src.replace('"%locale%"', JSON.stringify(locales[lang]));
fs.writeFileSync(`${__dirname}/built/client/assets/${file}.${version}.${lang}.js`, src, 'utf-8');
});
});
//#endregion
}),
new VueLoaderPlugin()
];
if (isProduction) {
plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
}
module.exports = {
entry,
module.exports = Object.keys(locales).map(lang => ({
entry: {
desktop: './src/client/app/desktop/script.ts',
mobile: './src/client/app/mobile/script.ts',
dev: './src/client/app/dev/script.ts',
auth: './src/client/app/auth/script.ts',
admin: './src/client/app/admin/script.ts',
sw: './src/client/app/sw.js'
},
module: {
rules: [{
test: /\.vue$/,
@ -118,21 +64,17 @@ module.exports = {
}, {
loader: 'css-loader',
options: {
modules: true,
minimize: true
modules: true
}
}, {
}, postcss, {
loader: 'stylus-loader'
}]
}, {
use: [{
loader: 'vue-style-loader'
}, {
loader: 'css-loader',
options: {
minimize: true
}
}, {
loader: 'css-loader'
}, postcss, {
loader: 'stylus-loader'
}]
}]
@ -141,11 +83,8 @@ module.exports = {
use: [{
loader: 'vue-style-loader'
}, {
loader: 'css-loader',
options: {
minimize: true
}
}]
loader: 'css-loader'
}, postcss]
}, {
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
loader: 'url-loader'
@ -165,8 +104,39 @@ module.exports = {
}]
}]
},
plugins,
output,
plugins: [
//new HardSourceWebpackPlugin(),
new ProgressBarPlugin({
format: chalk` {cyan.bold yes we can} {bold [}:bar{bold ]} {green.bold :percent} {gray (:current/:total)} :elapseds`,
clear: false
}),
new webpack.DefinePlugin({
_THEME_COLOR_: JSON.stringify(constants.themeColor),
_COPYRIGHT_: JSON.stringify(constants.copyright),
_VERSION_: JSON.stringify(meta.version),
_CLIENT_VERSION_: JSON.stringify(version),
_CODENAME_: JSON.stringify(codename),
_LANG_: JSON.stringify(lang),
_LANGS_: JSON.stringify(Object.keys(locales).map(l => [l, locales[l].meta.lang])),
_LOCALE_: JSON.stringify(locales[lang]),
_ENV_: JSON.stringify(process.env.NODE_ENV)
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
}),
new WebpackOnBuildPlugin((stats: any) => {
fs.writeFileSync('./built/client/meta.json', JSON.stringify({
version
}), 'utf-8');
}),
new VueLoaderPlugin(),
new webpack.optimize.ModuleConcatenationPlugin()
],
output: {
path: __dirname + '/built/client/assets',
filename: `[name].${version}.${lang}.js`,
publicPath: `/assets/`
},
resolve: {
extensions: [
'.js', '.ts', '.json'
@ -181,4 +151,4 @@ module.exports = {
cache: true,
devtool: false, //'source-map',
mode: isProduction ? 'production' : 'development'
};
}));