mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-21 07:16:15 -04:00
refactor: lazy-loading tools routes
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
parent
3401fa4cf1
commit
89713c4986
1 changed files with 13 additions and 22 deletions
|
@ -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')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue