फ्रंटएंड कोड स्प्लिटिंग: रूट-आधारित आणि घटक-आधारित

// 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 प्रदान करतो. React Router नेव्हिगेशन हाताळतो आणि सध्याच्या रूटवर आधारित योग्य घटक रेंडर केला जातो याची खात्री करतो.

उदाहरण (Angular)

Angular मध्ये, रूट-आधारित कोड स्प्लिटिंग लेझी-लोडेड मॉड्यूल्स वापरून साध्य केले जाते.

// 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 गुणधर्म लेझी पद्धतीने लोड केल्या जाणाऱ्या मॉड्यूलचा पथ निर्दिष्ट करतो. Angular चा राउटर वापरकर्ता संबंधित रूटवर नेव्हिगेट केल्यावरच मॉड्यूल आणि त्याचे संबंधित घटक स्वयंचलितपणे लोड करेल.

उदाहरण (Vue.js)

Vue.js राउटर कॉन्फिगरेशनमध्ये डायनॅमिक इम्पोर्ट्स वापरून रूट-आधारित कोड स्प्लिटिंगला देखील समर्थन देते.

// 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 पर्याय घटक असिंक्रोनसपणे लोड करण्यासाठी डायनॅमिक इम्पोर्ट वापरतो. जेव्हा रूट ॲक्सेस केला जातो तेव्हा Vue Router घटकाचे लोडिंग आणि रेंडरिंग हाताळेल.

रूट-आधारित कोड स्प्लिटिंगचे फायदे

• अंमलबजावणी करण्यास सोपे: रूट-आधारित कोड स्प्लिटिंग अंमलबजावणी करण्यास तुलनेने सोपे आहे, विशेषतः आधुनिक फ्रेमवर्कद्वारे प्रदान केलेल्या समर्थनामुळे.
• चिंतेचे स्पष्ट विभाजन: प्रत्येक रूट ॲप्लिकेशनचा एक वेगळा विभाग दर्शवतो, ज्यामुळे कोड आणि त्याच्या अवलंबनांबद्दल विचार करणे सोपे होते.
• मोठ्या ॲप्लिकेशन्ससाठी प्रभावी: अनेक रूट्स आणि वैशिष्ट्यांसह मोठ्या ॲप्लिकेशन्ससाठी रूट-आधारित कोड स्प्लिटिंग विशेषतः फायदेशीर आहे.

रूट-आधारित कोड स्प्लिटिंगचे तोटे

• पुरेसे दाणेदार (granular) नसण्याची शक्यता: अनेक रूट्समध्ये सामायिक असलेल्या जटिल घटकांसह ॲप्लिकेशन्ससाठी रूट-आधारित कोड स्प्लिटिंग पुरेसे नसू शकते.
• सुरुवातीचा लोडिंग वेळ अजूनही जास्त असू शकतो: जर एखाद्या रूटमध्ये अनेक अवलंबित्व असतील, तर त्या रूटसाठी सुरुवातीचा लोडिंग वेळ अजूनही लक्षणीय असू शकतो.

घटक-आधारित कोड स्प्लिटिंग

घटक-आधारित कोड स्प्लिटिंग ॲप्लिकेशन कोडला वैयक्तिक घटकांवर आधारित लहान भागांमध्ये विभाजित करून कोड स्प्लिटिंगला एक पाऊल पुढे घेऊन जाते. हा दृष्टिकोन कोड लोडिंगवर अधिक दाणेदार नियंत्रण ठेवण्याची अनुमती देतो आणि जटिल UI आणि पुन्हा वापरता येण्याजोगे घटक असलेल्या ॲप्लिकेशन्ससाठी विशेषतः प्रभावी असू शकतो.

अंमलबजावणी

घटक-आधारित कोड स्प्लिटिंग देखील डायनॅमिक इम्पोर्ट्सवर अवलंबून असते, परंतु संपूर्ण रूट्स लोड करण्याऐवजी, वैयक्तिक घटक मागणीनुसार लोड केले जातात. हे खालील तंत्रांचा वापर करून साध्य केले जाऊ शकते:

1. लेझी लोडिंग घटक: घटकांची गरज असेल तेव्हाच त्यांना लोड करण्यासाठी डायनॅमिक इम्पोर्ट्स वापरा, जसे की ते पहिल्यांदा रेंडर केले जातात किंवा एखादी विशिष्ट घटना घडते तेव्हा.
2. कंडिशनल रेंडरिंग: वापरकर्त्याच्या परस्परसंवादावर किंवा इतर घटकांवर आधारित घटकांना सशर्त रेंडर करा, अट पूर्ण झाल्यावरच घटक कोड लोड करा.
3. इंटरसेक्शन ऑब्झर्व्हर API: जेव्हा एखादा घटक व्ह्यूपोर्टमध्ये दिसतो तेव्हा ते शोधण्यासाठी आणि त्यानुसार त्याचा कोड लोड करण्यासाठी इंटरसेक्शन ऑब्झर्व्हर API वापरा. सुरुवातीला ऑफ-स्क्रीन असलेल्या घटकांना लोड करण्यासाठी हे विशेषतः उपयुक्त आहे.

उदाहरण (React)

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

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

function App() {
 return (
 

 Loading...
}>