ಫ್ರಂಟ್‌ಎಂಡ್ ಕೋಡ್ ವಿಭಜನೆ: ರೂಟ್-ಆಧಾರಿತ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, Home ಮತ್ತು About ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು React.lazy() ಮತ್ತು ಡೈನಾಮಿಕ್ ಆಮದುಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಲೇಜಿಯಾಗಿ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ. Suspense ಕಾಂಪೊನೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ರೂಟರ್ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರಸ್ತುತ ರೂಟ್‌ನ ಆಧಾರದ ಮೇಲೆ ಸರಿಯಾದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ (ಆಂಗುಲರ್)

ಆಂಗುಲರ್‌ನಲ್ಲಿ, ರೂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯನ್ನು ಲೇಜಿ-ಲೋಡ್ ಮಾಡಲಾದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಧಿಸಲಾಗುತ್ತದೆ.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

ಇಲ್ಲಿ, ರೂಟ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿನ loadChildren ಆಸ್ತಿ ಲೇಜಿಯಾಗಿ ಲೋಡ್ ಮಾಡಬೇಕಾದ ಮಾಡ್ಯೂಲ್‌ಗೆ ಮಾರ್ಗವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಆಂಗುಲರ್‌ನ ರೂಟರ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಮತ್ತು ಅದರ ಸಂಬಂಧಿತ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಕೆದಾರರು ಅನುಗುಣವಾದ ರೂಟ್‌ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಲೋಡ್ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ (ವ್ಯೂ.ಜೆಎಸ್)

ವ್ಯೂ.ಜೆಎಸ್ ರೂಟರ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿ ಡೈನಾಮಿಕ್ ಆಮದುಗಳನ್ನು ಬಳಸಿಕೊಂಡು ರೂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯನ್ನು ಸಹ ಬೆಂಬಲಿಸುತ್ತದೆ.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

ರೂಟ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿನ component ಆಯ್ಕೆಯು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅಸಮಕಾಲಿಕವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಡೈನಾಮಿಕ್ ಆಮದನ್ನು ಬಳಸುತ್ತದೆ. ರೂಟ್ ಪ್ರವೇಶಿಸಿದಾಗ ವ್ಯೂ ರೂಟರ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಲೋಡಿಂಗ್ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

ರೂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯ ಲಾಭಗಳು

• ಅನುಷ್ಠಾನಕ್ಕೆ ಸರಳ: ಆಧುನಿಕ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಒದಗಿಸುವ ಬೆಂಬಲದೊಂದಿಗೆ ರೂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯನ್ನು ಅನ್ವಯಿಸುವುದು ತುಲನಾತ್ಮಕವಾಗಿ ನೇರವಾಗಿರುತ್ತದೆ.
• ಕಳವಳಗಳ ಸ್ಪಷ್ಟ ವಿಭಜನೆ: ಪ್ರತಿ ರೂಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿಭಿನ್ನ ವಿಭಾಗವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಕೋಡ್ ಮತ್ತು ಅದರ ಅವಲಂಬನೆಗಳ ಬಗ್ಗೆ ಯೋಚಿಸುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
• ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿ: ರೂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯು ಅನೇಕ ರೂಟ್‌ಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹೊಂದಿರುವ ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.

ರೂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯ ಅನಾನುಕೂಲಗಳು

• ಸಾಕಷ್ಟು ಗ್ರ್ಯಾನ್ಯುಲರ್ ಆಗಿರದೇ ಇರಬಹುದು: ಅನೇಕ ರೂಟ್‌ಗಳಲ್ಲಿ ಹಂಚಿಕೊಂಡಿರುವ ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ರೂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯು ಸಾಕಾಗುವುದಿಲ್ಲ.
• ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವು ಇನ್ನೂ ಹೆಚ್ಚಿರಬಹುದು: ಒಂದು ರೂಟ್ ಅನೇಕ ಅವಲಂಬನೆಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಆ ರೂಟ್‌ಗಾಗಿ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವು ಇನ್ನೂ ಗಮನಾರ್ಹವಾಗಿರಬಹುದು.

ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆ

ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯು ಕೋಡ್ ವಿಭಜನೆಯನ್ನು ಒಂದು ಹೆಜ್ಜೆ ಮುಂದೆ ತೆಗೆದುಕೊಂಡು, ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್ ಅನ್ನು ಸಣ್ಣ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಕೋಡ್ ಲೋಡಿಂಗ್‌ನ ಮೇಲೆ ಹೆಚ್ಚು ಗ್ರ್ಯಾನ್ಯುಲರ್ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ಸಂಕೀರ್ಣ UI ಗಳು ಮತ್ತು ಪುನರ್ಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.

ಅನುಷ್ಠಾನ

ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಕೋಡ್ ವಿಭಜನೆಯು ಸಹ ಡೈನಾಮಿಕ್ ಆಮದುಗಳನ್ನು ಅವಲಂಬಿಸುತ್ತದೆ, ಆದರೆ ಸಂಪೂರ್ಣ ರೂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ಬದಲು, ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ಇದನ್ನು ಈ ಕೆಳಗಿನ ತಂತ್ರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಧಿಸಬಹುದು:

1. ಲೇಜಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದು: ಅವು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಡೈನಾಮಿಕ್ ಆಮದುಗಳನ್ನು ಬಳಸಿ, ಉದಾಹರಣೆಗೆ ಅವು ಮೊದಲ ಬಾರಿಗೆ ರೆಂಡರ್ ಆದಾಗ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಈವೆಂಟ್ ಸಂಭವಿಸಿದಾಗ.
2. ಷರತ್ತುಬದ್ಧ ರೆಂಡರಿಂಗ್: ಬಳಕೆದಾರರ ಸಂವಹನ ಅಥವಾ ಇತರ ಅಂಶಗಳ ಆಧಾರದ ಮೇಲೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ರೆಂಡರ್ ಮಾಡಿ, ಕಾಂಪೊನೆಂಟ್ ಕೋಡ್ ಅನ್ನು ಷರತ್ತು ಪೂರೈಸಿದಾಗ ಮಾತ್ರ ಲೋಡ್ ಮಾಡಿ.
3. ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ API: ಕಾಂಪೊನೆಂಟ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನಲ್ಲಿ ಗೋಚರಿಸುತ್ತಿದೆಯೇ ಎಂದು ಪತ್ತೆಹಚ್ಚಲು ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಬಳಸಿ ಮತ್ತು ಅದರ ಕೋಡ್ ಅನ್ನು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಲೋಡ್ ಮಾಡಿ. ಆರಂಭದಲ್ಲಿ ಪರದೆಯ ಹೊರಗಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಉದಾಹರಣೆ (ರಿಯಾಕ್ಟ್)

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 return (
 

 Loading...
}>