refactor: lazy-loading tools routes

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-13 23:28:25 +02:00
parent 3401fa4cf1
commit 89713c4986

View file

@ -1,19 +1,10 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from './routes/Home.vue' import Home from './routes/Home.vue'
import TokenGenerator from "./routes/tools/TokenGenerator";
import Hash from "./routes/tools/Hash";
import DateConverter from "./routes/tools/DateConverter";
import UrlEncoder from "./routes/tools/UrlEncoder";
import FileToBase64 from "./routes/tools/FileToBase64";
import TextCypher from "./routes/tools/TextCypher";
import TextStats from "./routes/tools/TextStats";
import BaseConverter from "./routes/tools/BaseConverter";
import UuidGenerator from "./routes/tools/UuidGenerator";
import ColorConverter from "./routes/tools/ColorConverter";
Vue.use(VueRouter) Vue.use(VueRouter)
const lazyLoad = (componentPath) => (() => import(componentPath));
const toolsComponents = [ const toolsComponents = [
{ {
@ -23,7 +14,7 @@ const toolsComponents = [
icon: 'fa-key', icon: 'fa-key',
text: 'Token generator', text: 'Token generator',
path: '/token-generator', path: '/token-generator',
component: TokenGenerator, component: lazyLoad('./routes/tools/TokenGenerator'),
keywords: ['token', 'random', 'string', 'alphanumeric'], keywords: ['token', 'random', 'string', 'alphanumeric'],
description: 'Generate random tokens.' description: 'Generate random tokens.'
}, },
@ -31,14 +22,14 @@ const toolsComponents = [
icon: 'fa-fingerprint', icon: 'fa-fingerprint',
text: 'Uuid generator', text: 'Uuid generator',
path: '/uuid-generator', path: '/uuid-generator',
component: UuidGenerator, component: lazyLoad('./routes/tools/UuidGenerator'),
keywords: ['token', 'v4', 'string', 'alphanumeric'] keywords: ['token', 'v4', 'string', 'alphanumeric']
}, },
{ {
icon: 'fa-font', icon: 'fa-font',
text: 'Hash text', text: 'Hash text',
path: '/hash', path: '/hash',
component: Hash, component: lazyLoad('./routes/tools/Hash'),
keywords: ['md5', 'sha1', 'sha256', 'sha224', 'sha512', 'sha384', 'sha3', 'ripemd160', 'random'] keywords: ['md5', 'sha1', 'sha256', 'sha224', 'sha512', 'sha384', 'sha3', 'ripemd160', 'random']
}, },
@ -46,7 +37,7 @@ const toolsComponents = [
icon: 'fa-lock', icon: 'fa-lock',
text: 'Cypher/uncypher text', text: 'Cypher/uncypher text',
path: '/cypher', path: '/cypher',
component: TextCypher, component: lazyLoad('./routes/tools/TextCypher'),
keywords: ['aes', 'tripledes', 'rabbit', 'rabbitlegacy', 'rc4'] keywords: ['aes', 'tripledes', 'rabbit', 'rabbitlegacy', 'rc4']
}, },
], ],
@ -58,21 +49,21 @@ const toolsComponents = [
icon: 'fa-calendar', icon: 'fa-calendar',
text: 'Date/Time converter', text: 'Date/Time converter',
path: '/date-converter', path: '/date-converter',
component: DateConverter, component: lazyLoad('./routes/tools/DateConverter'),
keywords: ['locale', 'format', 'iso 8601', 'utc', 'timestamp', 'unix', 'year', 'month', 'day', 'hours', 'minutes', 'seconds'] keywords: ['locale', 'format', 'iso 8601', 'utc', 'timestamp', 'unix', 'year', 'month', 'day', 'hours', 'minutes', 'seconds']
}, },
{ {
icon: 'fa-exchange-alt', icon: 'fa-exchange-alt',
text: 'Base converter', text: 'Base converter',
path: '/base-converter', path: '/base-converter',
component: BaseConverter, component: lazyLoad('./routes/tools/BaseConverter'),
keywords: ['binary', 'hexadecimal', 'decimal'] keywords: ['binary', 'hexadecimal', 'decimal']
}, },
{ {
icon: 'fa-palette', icon: 'fa-palette',
text: 'Color picker/converter', text: 'Color picker/converter',
path: '/color-picker-converter', path: '/color-picker-converter',
component: ColorConverter, component: lazyLoad('./routes/tools/ColorConverter'),
keywords: ['rgb', 'rgba', 'hexadecimal', 'hsla', 'red', 'green', 'blue', 'alpha'] keywords: ['rgb', 'rgba', 'hexadecimal', 'hsla', 'red', 'green', 'blue', 'alpha']
}, },
], ],
@ -84,14 +75,14 @@ const toolsComponents = [
icon: 'fa-link', icon: 'fa-link',
text: 'URL encode/decode', text: 'URL encode/decode',
path: '/url-encoder', path: '/url-encoder',
component: UrlEncoder, component: lazyLoad('./routes/tools/UrlEncoder'),
keywords: ['%20'] keywords: ['%20']
}, },
{ {
icon: 'fa-file-export', icon: 'fa-file-export',
text: 'File to Base64', text: 'File to Base64',
path: '/file-to-base64', path: '/file-to-base64',
component: FileToBase64 component: lazyLoad('./routes/tools/FileToBase64')
}, },
], ],
}, },
@ -102,7 +93,7 @@ const toolsComponents = [
icon: 'fa-align-left\n', icon: 'fa-align-left\n',
text: 'Text stats', text: 'Text stats',
path: '/text-stats', path: '/text-stats',
component: TextStats, component: lazyLoad('./routes/tools/TextStats'),
keywords: ['word', 'count', 'size', 'bytes', 'length'] keywords: ['word', 'count', 'size', 'bytes', 'length']
}, },
], ],
@ -120,12 +111,12 @@ const routes = [
{ {
path: '/about', path: '/about',
name: 'About', name: 'About',
component: () => import('./routes/About.vue') component: lazyLoad('./routes/About.vue')
}, },
{ {
path: '*', path: '*',
name: '404', name: '404',
component: () => import('./routes/NotFound.vue') component: lazyLoad('./routes/NotFound.vue')
} }
] ]