refactor: lazy-loading tools routes
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
		
							parent
							
								
									3401fa4cf1
								
							
						
					
					
						commit
						89713c4986
					
				| @ -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…
	
		Reference in New Issue
	
	Block a user