[Client] Enable code splitting

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

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.src('./src/server/web/views/**/*').pipe(gulp.dest('./built/server/web/views'))
); );
// 互換性のため gulp.task('build:copy', ['build:copy: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.src([ gulp.src([
'./build/Release/crypto_key.node', './build/Release/crypto_key.node',
'./src/const.json', './src/const.json',

View file

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

View file

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

View file

@ -7,7 +7,8 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { lib } from 'emojilib'; //
//import { lib } from 'emojilib';
export default Vue.extend({ export default Vue.extend({
props: { props: {
@ -50,10 +51,10 @@ export default Vue.extend({
this.customEmoji = customEmoji; this.customEmoji = customEmoji;
this.url = customEmoji.url; this.url = customEmoji.url;
} else { } else {
const emoji = lib[this.name]; //const emoji = lib[this.name];
if (emoji) { //if (emoji) {
this.char = emoji.char; // this.char = emoji.char;
} //}
} }
} else { } else {
this.char = this.emoji; this.char = this.emoji;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -17,82 +17,28 @@ const meta = require('./package.json');
const version = meta.clientVersion; const version = meta.clientVersion;
const codename = meta.codename; const codename = meta.codename;
const langs = Object.keys(locales);
const isProduction = process.env.NODE_ENV == 'production'; const isProduction = process.env.NODE_ENV == 'production';
// Entries const postcss = {
const entry = { loader: 'postcss-loader',
desktop: './src/client/app/desktop/script.ts', options: {
mobile: './src/client/app/mobile/script.ts', plugins: [
dev: './src/client/app/dev/script.ts', require('cssnano')({
auth: './src/client/app/auth/script.ts', preset: 'default'
admin: './src/client/app/admin/script.ts', })
sw: './src/client/app/sw.js' ]
},
}; };
const output = { module.exports = Object.keys(locales).map(lang => ({
path: __dirname + '/built/client/assets', entry: {
filename: `[name].${version}.-.js` desktop: './src/client/app/desktop/script.ts',
}; mobile: './src/client/app/mobile/script.ts',
dev: './src/client/app/dev/script.ts',
//#region Define consts auth: './src/client/app/auth/script.ts',
const consts = { admin: './src/client/app/admin/script.ts',
_THEME_COLOR_: constants.themeColor, sw: './src/client/app/sw.js'
_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: { module: {
rules: [{ rules: [{
test: /\.vue$/, test: /\.vue$/,
@ -118,21 +64,17 @@ module.exports = {
}, { }, {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
modules: true, modules: true
minimize: true
} }
}, { }, postcss, {
loader: 'stylus-loader' loader: 'stylus-loader'
}] }]
}, { }, {
use: [{ use: [{
loader: 'vue-style-loader' loader: 'vue-style-loader'
}, { }, {
loader: 'css-loader', loader: 'css-loader'
options: { }, postcss, {
minimize: true
}
}, {
loader: 'stylus-loader' loader: 'stylus-loader'
}] }]
}] }]
@ -141,11 +83,8 @@ module.exports = {
use: [{ use: [{
loader: 'vue-style-loader' loader: 'vue-style-loader'
}, { }, {
loader: 'css-loader', loader: 'css-loader'
options: { }, postcss]
minimize: true
}
}]
}, { }, {
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
loader: 'url-loader' loader: 'url-loader'
@ -165,8 +104,39 @@ module.exports = {
}] }]
}] }]
}, },
plugins, plugins: [
output, //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: { resolve: {
extensions: [ extensions: [
'.js', '.ts', '.json' '.js', '.ts', '.json'
@ -181,4 +151,4 @@ module.exports = {
cache: true, cache: true,
devtool: false, //'source-map', devtool: false, //'source-map',
mode: isProduction ? 'production' : 'development' mode: isProduction ? 'production' : 'development'
}; }));