Frontend Code Splitting: வழித்தடம் மற்றும் கூறு அடிப்படையிலான உத்திகளின் ஆழமான பார்வை

நவீன டிஜிட்டல் உலகில், உங்கள் வலைத்தளத்தைப் பற்றிய ஒரு பயனரின் முதல் அபிப்ராயம் பெரும்பாலும் ஒரே ஒரு அளவீட்டால் வரையறுக்கப்படுகிறது: வேகம். மெதுவாக ஏற்றப்படும் ஒரு பயன்பாடு அதிக பவுன்ஸ் விகிதங்கள், விரக்தியடைந்த பயனர்கள் மற்றும் வருவாய் இழப்புக்கு வழிவகுக்கும். frontend பயன்பாடுகள் சிக்கலானதாக வளரும்போது, அவற்றின் அளவை நிர்வகிப்பது ஒரு முக்கியமான சவாலாகிறது. பெரும்பாலான பண்ட்லர்களின் இயல்புநிலை நடத்தை, உங்கள் பயன்பாட்டின் அனைத்து குறியீட்டையும் கொண்ட ஒரு ஒற்றை, மோனோலிதிக் ஜாவாஸ்கிரிப்ட் கோப்பை உருவாக்குவதாகும். இதன் பொருள், உங்கள் முகப்புப் பக்கத்தைப் பார்வையிடும் ஒரு பயனர், நிர்வாக டாஷ்போர்டு, பயனர் சுயவிவர அமைப்புகள் மற்றும் அவர்கள் ஒருபோதும் பயன்படுத்தாத செக்அவுட் செயல்முறைக்கான குறியீட்டையும் பதிவிறக்கம் செய்யலாம்.

இங்குதான் கோட் ஸ்ப்ளிட்டிங் (code splitting) கைகொடுக்கிறது. இது உங்கள் பெரிய ஜாவாஸ்கிரிப்ட் பண்டிலை சிறிய, நிர்வகிக்கக்கூடிய துண்டுகளாக (chunks) உடைக்க உங்களை அனுமதிக்கும் ஒரு சக்திவாய்ந்த நுட்பமாகும், அவற்றை தேவைக்கேற்ப ஏற்றலாம். பயனருக்கு ஆரம்பக் காட்சிக்குத் தேவையான குறியீட்டை மட்டும் அனுப்புவதன் மூலம், நீங்கள் ஏற்றுதல் நேரத்தை வியத்தகு முறையில் மேம்படுத்தலாம், பயனர் அனுபவத்தை மேம்படுத்தலாம் மற்றும் கூகிளின் கோர் வெப் வைட்டல்ஸ் (Core Web Vitals) போன்ற முக்கியமான செயல்திறன் அளவீடுகளை சாதகமாக பாதிக்கலாம்.

இந்த விரிவான வழிகாட்டி, frontend கோட் ஸ்ப்ளிட்டிங்கிற்கான இரண்டு முதன்மை உத்திகளை ஆராய்வோம்: வழித்தடம்-அடிப்படை மற்றும் கூறு-அடிப்படை. ஒவ்வொரு அணுகுமுறையின் ஏன், எப்படி, மற்றும் எப்போது என்பதை, React, Vue மற்றும் Angular போன்ற பிரபலமான கட்டமைப்புகளைப் பயன்படுத்தி நடைமுறை, நிஜ-உலக எடுத்துக்காட்டுகளுடன் ஆழமாக ஆராய்வோம்.

சிக்கல்: ஒற்றை ஜாவாஸ்கிரிப்ட் பண்டில் (The Monolithic JavaScript Bundle)

நீங்கள் கடற்கரை விடுமுறை, ஒரு மலை ஏற்றம், மற்றும் ஒரு முறையான வணிக மாநாடு உள்ளிட்ட பல இடங்களுக்குச் செல்லும் பயணத்திற்குப் பொதி கட்டுவதாக கற்பனை செய்து பாருங்கள். மோனோலிதிக் அணுகுமுறை என்பது உங்கள் நீச்சலுடை, மலையேற்ற காலணிகள் மற்றும் வணிக உடை ஆகியவற்றை ஒரே பெரிய சூட்கேஸில் திணிப்பதைப் போன்றது. நீங்கள் கடற்கரைக்கு வரும்போது, உங்களுக்கு நீச்சலுடை மட்டுமே தேவைப்பட்டாலும், இந்த மாபெரும் பெட்டியை நீங்கள் சுமக்க வேண்டும். இது கனமானது, திறனற்றது, மற்றும் சிரமமானது.

ஒரு மோனோலிதிக் ஜாவாஸ்கிரிப்ட் பண்டில் ஒரு வலைப் பயன்பாட்டிற்கு இதே போன்ற சிக்கல்களை அளிக்கிறது:

• அதிகப்படியான ஆரம்ப ஏற்றுதல் நேரம்: பயனர் எதையும் பார்க்கவோ அல்லது தொடர்பு கொள்ளவோ முன், உலாவி முழு பயன்பாட்டின் குறியீட்டையும் பதிவிறக்கம் செய்து, அலசி, செயல்படுத்த வேண்டும். மெதுவான நெட்வொர்க்குகள் அல்லது குறைந்த சக்தி வாய்ந்த சாதனங்களில் இது பல வினாடிகள் ஆகலாம்.
• வீணான அலைவரிசை: பயனர்கள் ஒருபோதும் அணுகாத அம்சங்களுக்கான குறியீட்டைப் பதிவிறக்கம் செய்கிறார்கள், இது அவர்களின் தரவுத் திட்டங்களை தேவையற்ற முறையில் பயன்படுத்துகிறது. விலை உயர்ந்த அல்லது வரையறுக்கப்பட்ட இணைய அணுகல் உள்ள பிராந்தியங்களில் மொபைல் பயனர்களுக்கு இது குறிப்பாக சிக்கலானது.
• மோசமான கேச்சிங் செயல்திறன்: ஒரு அம்சத்தில் ஒரு வரிக்கான சிறிய மாற்றம் முழு பண்டிலின் கேச்சையும் செல்லாததாக்குகிறது. பயனர் பின்னர் 99% மாறாமல் இருந்தாலும், முழு பயன்பாட்டையும் மீண்டும் பதிவிறக்க வேண்டிய கட்டாயத்தில் உள்ளார்.
• கோர் வெப் வைட்டல்ஸ் மீது எதிர்மறையான தாக்கம்: பெரிய பண்டில்கள் Largest Contentful Paint (LCP) மற்றும் Time to Interactive (TTI) போன்ற அளவீடுகளை நேரடியாகப் பாதிக்கின்றன, இது உங்கள் தளத்தின் SEO தரவரிசை மற்றும் பயனர் திருப்தியைப் பாதிக்கலாம்.

கோட் ஸ்ப்ளிட்டிங் இந்த சிக்கலுக்கான தீர்வாகும். இது மூன்று தனித்தனி, சிறிய பைகளை பேக்கிங் செய்வது போன்றது: ஒன்று கடற்கரைக்கு, ஒன்று மலைகளுக்கு, மற்றும் ஒன்று மாநாட்டிற்கு. உங்களுக்குத் தேவையானதை, உங்களுக்குத் தேவைப்படும்போது மட்டுமே நீங்கள் எடுத்துச் செல்கிறீர்கள்.

தீர்வு: கோட் ஸ்ப்ளிட்டிங் என்றால் என்ன?

கோட் ஸ்ப்ளிட்டிங் என்பது உங்கள் பயன்பாட்டின் குறியீட்டை பல்வேறு பண்டில்கள் அல்லது "சங்க்களாக" பிரிக்கும் செயல்முறையாகும், அவற்றை பின்னர் தேவைக்கேற்ப அல்லது இணையாக ஏற்றலாம். ஒரு பெரிய `app.js` க்கு பதிலாக, உங்களிடம் `main.js`, `dashboard.chunk.js`, `profile.chunk.js`, மற்றும் பல இருக்கலாம்.

Webpack, Vite, மற்றும் Rollup போன்ற நவீன பில்ட் கருவிகள் இந்த செயல்முறையை நம்பமுடியாத அளவிற்கு அணுகக்கூடியதாக ஆக்கியுள்ளன. அவை டைனமிக் `import()` சிண்டாக்ஸைப் பயன்படுத்துகின்றன, இது நவீன ஜாவாஸ்கிரிப்ட்டின் (ECMAScript) ஒரு அம்சமாகும், இது தொகுதிகளை ஒத்திசைவற்ற முறையில் இறக்குமதி செய்ய உங்களை அனுமதிக்கிறது. ஒரு பண்ட்லர் `import()` ஐப் பார்க்கும்போது, அது தானாகவே அந்த தொகுதி மற்றும் அதன் சார்புகளுக்கு ஒரு தனி சங்கை உருவாக்குகிறது.

கோட் ஸ்ப்ளிட்டிங்கைச் செயல்படுத்துவதற்கான இரண்டு மிகவும் பொதுவான மற்றும் பயனுள்ள உத்திகளை ஆராய்வோம்.

உத்தி 1: வழித்தடம்-அடிப்படை கோட் ஸ்ப்ளிட்டிங்

வழித்தடம்-அடிப்படை பிரித்தல் மிகவும் உள்ளுணர்வு மற்றும் பரவலாக ஏற்றுக்கொள்ளப்பட்ட கோட் ஸ்ப்ளிட்டிங் உத்தியாகும். தர்க்கம் எளிதானது: ஒரு பயனர் `/home` பக்கத்தில் இருந்தால், அவர்களுக்கு `/dashboard` அல்லது `/settings` பக்கங்களுக்கான குறியீடு தேவையில்லை. உங்கள் பயன்பாட்டின் வழித்தடங்களில் உங்கள் குறியீட்டைப் பிரிப்பதன் மூலம், பயனர்கள் தற்போது பார்க்கும் பக்கத்திற்கான குறியீட்டை மட்டுமே பதிவிறக்கம் செய்வதை உறுதிசெய்கிறீர்கள்.

அது எப்படி வேலை செய்கிறது

ஒரு குறிப்பிட்ட வழித்தடத்துடன் தொடர்புடைய கூறுகளை மாறும் வகையில் ஏற்றுவதற்கு உங்கள் பயன்பாட்டின் ரவுட்டரை நீங்கள் உள்ளமைக்கிறீர்கள். ஒரு பயனர் அந்த வழித்தடத்திற்கு முதல் முறையாக செல்லும்போது, ரவுட்டர் தொடர்புடைய ஜாவாஸ்கிரிப்ட் சங்கை பெறுவதற்கான ஒரு நெட்வொர்க் கோரிக்கையைத் தூண்டுகிறது. ஏற்றப்பட்டவுடன், கூறு ரெண்டர் செய்யப்படுகிறது, மற்றும் அடுத்தடுத்த வருகைகளுக்காக உலாவி மூலம் சங் கேச் செய்யப்படுகிறது.

வழித்தடம்-அடிப்படை பிரித்தலின் நன்மைகள்

• குறிப்பிடத்தக்க ஆரம்ப ஏற்றுதல் குறைப்பு: ஆரம்ப பண்டில் முக்கிய பயன்பாட்டு தர்க்கம் மற்றும் இயல்புநிலை வழித்தடத்திற்கான குறியீட்டை மட்டுமே கொண்டுள்ளது (எ.கா., முகப்பு பக்கம்), இது மிகவும் சிறியதாகவும் வேகமாக ஏற்றுவதாகவும் அமைகிறது.
• செயல்படுத்த எளிதானது: பெரும்பாலான நவீன ரவுட்டிங் லைப்ரரிகள் லேசி லோடிங்கிற்கான உள்ளமைக்கப்பட்ட ஆதரவைக் கொண்டுள்ளன, இது செயல்படுத்துவதை எளிதாக்குகிறது.
• தெளிவான தர்க்கரீதியான எல்லைகள்: வழித்தடங்கள் உங்கள் குறியீட்டிற்கு இயற்கையான மற்றும் தெளிவான பிரிப்பு புள்ளிகளை வழங்குகின்றன, இது உங்கள் பயன்பாட்டின் எந்தப் பகுதிகள் பிரிக்கப்படுகின்றன என்பதைப் பற்றி பகுத்தறிவதை எளிதாக்குகிறது.

செயல்படுத்தல் எடுத்துக்காட்டுகள்

React மற்றும் React Router உடன்

React இதற்காக இரண்டு முக்கிய பயன்பாடுகளை வழங்குகிறது: `React.lazy()` மற்றும் ``. `React.lazy` ஒரு மாறும் வகையில் இறக்குமதி செய்யப்பட்ட கூறை ஒரு சாதாரண கூறாக ரெண்டர் செய்ய உங்களை அனுமதிக்கிறது. `` லேசி கூறின் குறியீடு ஏற்றப்படும்போது காண்பிக்க ஒரு ஏற்றுதல் குறிகாட்டியை (ஒரு ஸ்பின்னர் போன்றவை) குறிப்பிட உங்களை அனுமதிக்கிறது.

React Router ஐப் பயன்படுத்தி எடுத்துக்காட்டு `App.js`:

            
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// Statically import components that are always needed
import Navbar from './components/Navbar';
import LoadingSpinner from './components/LoadingSpinner';

// Lazily import route components
const HomePage = lazy(() => import('./pages/HomePage'));
const DashboardPage = lazy(() => import('./pages/DashboardPage'));
const SettingsPage = lazy(() => import('./pages/SettingsPage'));
const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));

function App() {
  return (
    <Router>
      <Navbar />
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/dashboard" element={<DashboardPage />} />
          <Route path="/settings" element={<SettingsPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், `DashboardPage` மற்றும் `SettingsPage` க்கான குறியீடு ஆரம்ப பண்டில் சேர்க்கப்படாது. ஒரு பயனர் `/dashboard` அல்லது `/settings` க்கு செல்லும்போது மட்டுமே அது சேவையகத்திலிருந்து பெறப்படும். `Suspense` கூறு இந்த பெறுதலின் போது `LoadingSpinner` ஐக் காண்பிப்பதன் மூலம் ஒரு மென்மையான பயனர் அனுபவத்தை உறுதி செய்கிறது.

Vue மற்றும் Vue Router உடன்

Vue Router உங்கள் வழித்தட உள்ளமைவில் நேரடியாக டைனமிக் `import()` சிண்டாக்ஸைப் பயன்படுத்தி லேசி லோடிங் வழித்தடங்களை ஆதரிக்கிறது.

Vue Router ஐப் பயன்படுத்தி எடுத்துக்காட்டு `router/index.js`:

            
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue'; // Statically imported for initial load

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // Route level code-splitting
    // This generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ '../views/DashboardView.vue')
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

            

              
                Copy
              
            
          

இங்கே, `/about` மற்றும் `/dashboard` வழித்தடங்களுக்கான கூறு ஒரு டைனமிக் இறக்குமதியைத் தரும் ஒரு செயல்பாடாக வரையறுக்கப்பட்டுள்ளது. பண்ட்லர் இதை புரிந்துகொண்டு தனித்தனி சங்க்களை உருவாக்குகிறது. `/* webpackChunkName: "about" */` என்பது ஒரு "மேஜிக் கருத்து" ஆகும், இது Webpack-க்கு ஒரு பொதுவான ஐடிக்குப் பதிலாக `about.js` என பெயரிடச் சொல்கிறது, இது பிழைத்திருத்தத்திற்கு பயனுள்ளதாக இருக்கும்.

Angular மற்றும் Angular Router உடன்

Angular-இன் ரவுட்டர் வழித்தட உள்ளமைவில் `loadChildren` பண்பைப் பயன்படுத்தி முழு தொகுதிகளின் லேசி லோடிங்கை செயல்படுத்துகிறது.

எடுத்துக்காட்டு `app-routing.module.ts`:

            
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component'; // Part of the main bundle

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'products',
    // Lazy load the ProductsModule
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  },
  {
    path: 'admin',
    // Lazy load the AdminModule
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

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

            

              
                Copy
              
            
          

இந்த Angular எடுத்துக்காட்டில், `products` மற்றும் `admin` அம்சங்கள் தொடர்பான குறியீடு அவற்றின் சொந்த தொகுதிகளுக்குள் (`ProductsModule` மற்றும் `AdminModule`) இணைக்கப்பட்டுள்ளது. `loadChildren` சிண்டாக்ஸ், ஒரு பயனர் `/products` அல்லது `/admin` உடன் தொடங்கும் ஒரு URL க்கு செல்லும்போது மட்டுமே இந்த தொகுதிகளைப் பெற்று ஏற்ற Angular ரவுட்டருக்கு அறிவுறுத்துகிறது.

உத்தி 2: கூறு-அடிப்படை கோட் ஸ்ப்ளிட்டிங்

வழித்தடம்-அடிப்படை பிரித்தல் ஒரு அருமையான தொடக்கப் புள்ளியாக இருந்தாலும், கூறு-அடிப்படை பிரித்தலுடன் செயல்திறன் மேம்படுத்தலை இன்னும் ஒரு படி மேலே கொண்டு செல்லலாம். இந்த உத்தி, கூறுகளை ஒரு குறிப்பிட்ட காட்சியில் உண்மையில் தேவைப்படும்போது மட்டுமே ஏற்றுவதை உள்ளடக்குகிறது, பெரும்பாலும் ஒரு பயனர் தொடர்புக்குப் பதிலாக.

உடனடியாகத் தெரியாத அல்லது அரிதாகப் பயன்படுத்தப்படும் கூறுகளைப் பற்றி சிந்தியுங்கள். அவற்றின் குறியீடு ஏன் ஆரம்பப் பக்க ஏற்றத்தின் ஒரு பகுதியாக இருக்க வேண்டும்?

கூறு-அடிப்படை பிரித்தலுக்கான பொதுவான பயன்பாட்டு வழக்குகள்

• மோடல்கள் மற்றும் உரையாடல் பெட்டிகள்: ஒரு சிக்கலான மோடலுக்கான (எ.கா., ஒரு பயனர் சுயவிவர எடிட்டர்) குறியீட்டை பயனர் அதைத் திறக்க பொத்தானைக் கிளிக் செய்யும்போது மட்டுமே ஏற்ற வேண்டும்.
• Below-the-Fold உள்ளடக்கம்: ஒரு நீண்ட முகப்புப் பக்கத்திற்கு, பக்கத்தின் கீழே வெகு தொலைவில் உள்ள சிக்கலான கூறுகளை பயனர் அவற்றிற்கு அருகில் ஸ்க்ரோல் செய்யும்போது மட்டுமே ஏற்றலாம்.
• சிக்கலான UI கூறுகள்: ஊடாடும் வரைபடங்கள், தேதி தேர்வாளர்கள் அல்லது ரிச் டெக்ஸ்ட் எடிட்டர்கள் போன்ற கனமான கூறுகளை, அவை இருக்கும் பக்கத்தின் ஆரம்ப ரெண்டரை விரைவுபடுத்த லேசி-லோட் செய்யலாம்.
• அம்சக் கொடிகள் அல்லது A/B சோதனைகள்: ஒரு குறிப்பிட்ட அம்சக் கொடி பயனருக்கு இயக்கப்பட்டிருந்தால் மட்டுமே ஒரு கூறினை ஏற்றவும்.
• பங்கு-அடிப்படை UI: டாஷ்போர்டில் உள்ள ஒரு நிர்வாகி-குறிப்பிட்ட கூறு 'நிர்வாகி' பங்கு உள்ள பயனர்களுக்கு மட்டுமே ஏற்றப்பட வேண்டும்.

செயல்படுத்தல் எடுத்துக்காட்டுகள்

React

நீங்கள் அதே `React.lazy` மற்றும் `Suspense` முறையைப் பயன்படுத்தலாம், ஆனால் பயன்பாட்டின் நிலையின் அடிப்படையில் நிபந்தனையுடன் ரெண்டரிங்கைத் தூண்டலாம்.

லேசி-லோட் செய்யப்பட்ட மோடலின் எடுத்துக்காட்டு:

            
import React, { useState, Suspense, lazy } from 'react';
import LoadingSpinner from './components/LoadingSpinner';

// Lazily import the modal component
const EditProfileModal = lazy(() => import('./components/EditProfileModal'));

function UserProfilePage() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <h1>User Profile</h1>
      <p>Some user information here...</p>
      <button onClick={openModal}>Edit Profile</button>

      {/* The modal component and its code will only be loaded when isModalOpen is true */}
      {isModalOpen && (
        <Suspense fallback={<LoadingSpinner />}>
          <EditProfileModal onClose={closeModal} />
        </Suspense>
      )}
    </div>
  );
}

export default UserProfilePage;

            

              
                Copy
              
            
          

இந்த சூழ்நிலையில், `EditProfileModal.js`-க்கான ஜாவாஸ்கிரிப்ட் சங், பயனர் "சுயவிவரத்தைத் திருத்து" பொத்தானை முதல் முறையாக கிளிக் செய்த பிறகு மட்டுமே சேவையகத்திலிருந்து கோரப்படுகிறது.

Vue

Vue-இன் `defineAsyncComponent` செயல்பாடு இதற்கு சரியானதாகும். இது ஒரு கூறினைச் சுற்றி ஒரு உறையை உருவாக்க உங்களை அனுமதிக்கிறது, அது உண்மையில் ரெண்டர் செய்யப்படும்போது மட்டுமே ஏற்றப்படும்.

லேசி-லோட் செய்யப்பட்ட வரைபடக் கூறின் எடுத்துக்காட்டு:

            
<template>
  <div>
    <h1>Sales Dashboard</h1>
    <button @click="showChart = true" v-if="!showChart">Show Sales Chart</button>

    <!-- The SalesChart component will be loaded and rendered only when showChart is true -->
    <SalesChart v-if="showChart" />
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue';

const showChart = ref(false);

// Define an async component. The heavy charting library will be in its own chunk.
const SalesChart = defineAsyncComponent(() =>
  import('../components/SalesChart.vue')
);
</script>

            

              
                Copy
              
            
          

இங்கே, கனமான `SalesChart` கூறுக்கான குறியீடு (மற்றும் அதன் சார்புகள், ஒரு வரைபட நூலகம் போன்றவை) தனிமைப்படுத்தப்பட்டுள்ளது. பயனர் பொத்தானைக் கிளிக் செய்வதன் மூலம் வெளிப்படையாகக் கோரும்போது மட்டுமே அது பதிவிறக்கம் செய்யப்பட்டு மவுண்ட் செய்யப்படுகிறது.

மேம்பட்ட நுட்பங்கள் மற்றும் வடிவங்கள்

வழித்தடம் மற்றும் கூறு-அடிப்படை பிரித்தலின் அடிப்படைகளை நீங்கள் தேர்ச்சி பெற்றவுடன், பயனர் அனுபவத்தை மேலும் செம்மைப்படுத்த மேம்பட்ட நுட்பங்களைப் பயன்படுத்தலாம்.

சங்க்களை ப்ரீலோடிங் மற்றும் ப்ரீஃபெட்சிங் செய்தல்

அடுத்த வழித்தடத்தின் குறியீட்டைப் பெறுவதற்கு முன் ஒரு பயனர் ஒரு இணைப்பைக் கிளிக் செய்யும் வரை காத்திருப்பது ஒரு சிறிய தாமதத்தை அறிமுகப்படுத்தலாம். முன்கூட்டியே குறியீட்டை ஏற்றுவதன் மூலம் நாம் இதை புத்திசாலித்தனமாக கையாளலாம்.

• ப்ரீஃபெட்சிங் (Prefetching): இது உலாவிக்கு அதன் செயலற்ற நேரத்தில் ஒரு வளத்தைப் பெறச் சொல்கிறது, ஏனெனில் பயனர் ஒரு எதிர்கால வழிசெலுத்தலுக்கு அது தேவைப்படலாம். இது ஒரு குறைந்த முன்னுரிமை குறிப்பு. உதாரணமாக, பயனர் உள்நுழைந்தவுடன், நீங்கள் டாஷ்போர்டுக்கான குறியீட்டை ப்ரீஃபெட்ச் செய்யலாம், ஏனெனில் அவர்கள் அடுத்து அங்கு செல்வதற்கான வாய்ப்பு அதிகம்.
• ப்ரீலோடிங் (Preloading): இது உலாவிக்கு ஒரு வளத்தை உயர் முன்னுரிமையுடன் பெறச் சொல்கிறது, ஏனெனில் அது தற்போதைய பக்கத்திற்குத் தேவைப்படுகிறது, ஆனால் அதன் கண்டுபிடிப்பு தாமதமானது (எ.கா., ஒரு CSS கோப்பில் ஆழமாக வரையறுக்கப்பட்ட ஒரு எழுத்துரு). கோட் ஸ்ப்ளிட்டிங்கின் சூழலில், ஒரு பயனர் ஒரு இணைப்பின் மீது சுட்டியை வைக்கும்போது ஒரு சங்கை ப்ரீலோட் செய்யலாம், அவர்கள் கிளிக் செய்யும்போது வழிசெலுத்தல் உடனடியாக உணரப்படும்.

Webpack மற்றும் Vite போன்ற பண்ட்லர்கள் இதை "மேஜிக் கருத்துகள்" பயன்படுத்தி செயல்படுத்த உங்களை அனுமதிக்கின்றன:

            
// Prefetch: good for likely next pages
import(/* webpackPrefetch: true, webpackChunkName: "dashboard" */ './pages/DashboardPage');

// Preload: good for high-confidence next interactions on the current page
const openModal = () => {
  import(/* webpackPreload: true, webpackChunkName: "profile-modal" */ './components/ProfileModal');
  // ... then open the modal
}

            

              
                Copy
              
            
          

ஏற்றுதல் மற்றும் பிழை நிலைகளைக் கையாளுதல்

ஒரு நெட்வொர்க்கில் குறியீட்டை ஏற்றுவது ஒரு ஒத்திசைவற்ற செயல்பாடு ஆகும், அது தோல்வியடையக்கூடும். ஒரு வலுவான செயலாக்கம் இதை கணக்கில் கொள்ள வேண்டும்.

• ஏற்றுதல் நிலைகள்: ஒரு சங் பெறப்படும்போது எப்போதும் பயனருக்கு பின்னூட்டம் வழங்கவும். இது UI பதிலளிக்காமல் இருப்பதைத் தடுக்கிறது. பொதுவான ஸ்பின்னர்களை விட எலும்புக்கூடுகள் (இறுதி தளவமைப்பைப் பிரதிபலிக்கும் ஒதுக்கிட UIகள்) பெரும்பாலும் ஒரு சிறந்த பயனர் அனுபவமாகும். React-இன் `` இதை எளிதாக்குகிறது. Vue மற்றும் Angular-ல், நீங்கள் ஒரு ஏற்றுதல் கொடியுடன் `v-if`/`ngIf` ஐப் பயன்படுத்தலாம்.
• பிழை நிலைகள்: பயனர் ஒரு நிலையற்ற நெட்வொர்க்கில் இருந்தால் மற்றும் ஜாவாஸ்கிரிப்ட் சங் ஏற்றத் தவறினால் என்ன செய்வது? உங்கள் பயன்பாடு செயலிழக்கக் கூடாது. உங்கள் லேசி-லோட் செய்யப்பட்ட கூறுகளை ஒரு பிழை எல்லையில் (Error Boundary) (React-ல்) போர்த்தவும் அல்லது தோல்வியை அழகாகக் கையாள டைனமிக் இறக்குமதி வாக்குறுதியில் `.catch()` ஐப் பயன்படுத்தவும். நீங்கள் ஒரு பிழைச் செய்தியையும் "மீண்டும் முயற்சிக்கவும்" பொத்தானையும் காட்டலாம்.

React பிழை எல்லை எடுத்துக்காட்டு:

            
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  return (
    <ErrorBoundary
      FallbackComponent={({ error, resetErrorBoundary }) => (
        <div>
          <p>Oops! Failed to load component.</p>
          <button onClick={resetErrorBoundary}>Try again</button>
        </div>
      )}
    >
      <Suspense fallback={<Spinner />}>
        <MyLazyLoadedComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

            

              
                Copy
              
            
          

கருவிகள் மற்றும் பகுப்பாய்வு

நீங்கள் அளவிட முடியாததை மேம்படுத்த முடியாது. நவீன frontend கருவிகள் உங்கள் பயன்பாட்டின் பண்டில்களைக் காட்சிப்படுத்தவும் பகுப்பாய்வு செய்யவும் சிறந்த பயன்பாடுகளை வழங்குகின்றன.

• Webpack Bundle Analyzer: இந்த கருவி உங்கள் வெளியீட்டு பண்டில்களின் ஒரு ட்ரீமேப் காட்சிப்படுத்தலை உருவாக்குகிறது. ஒவ்வொரு சங்கிற்குள் என்ன இருக்கிறது என்பதைக் கண்டறியவும், பெரிய அல்லது நகல் சார்புகளைக் கண்டறியவும், மற்றும் உங்கள் கோட் ஸ்ப்ளிட்டிங் உத்தி எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை சரிபார்க்கவும் இது விலைமதிப்பற்றது.
• Vite (Rollup Plugin Visualizer): Vite பயனர்கள் தங்கள் பண்டில் கலவையின் இதே போன்ற ஊடாடும் வரைபடத்தைப் பெற `rollup-plugin-visualizer` ஐப் பயன்படுத்தலாம்.

உங்கள் பண்டில்களைத் தவறாமல் பகுப்பாய்வு செய்வதன் மூலம், மேலும் மேம்படுத்துவதற்கான வாய்ப்புகளை நீங்கள் கண்டறியலாம். உதாரணமாக, `moment.js` அல்லது `lodash` போன்ற ஒரு பெரிய நூலகம் பல சங்க்களில் சேர்க்கப்படுவதை நீங்கள் கண்டறியலாம். இதை ஒரு பகிரப்பட்ட `vendors` சங்குக்கு நகர்த்த அல்லது ஒரு இலகுவான மாற்றீட்டைக் கண்டுபிடிக்க இது ஒரு வாய்ப்பாக இருக்கலாம்.

சிறந்த நடைமுறைகள் மற்றும் பொதுவான இடர்பாடுகள்

சக்திவாய்ந்ததாக இருந்தாலும், கோட் ஸ்ப்ளிட்டிங் ஒரு வெள்ளித் தோட்டா அல்ல. அதை தவறாகப் பயன்படுத்துவது சில நேரங்களில் செயல்திறனைப் பாதிக்கலாம்.

• அதிகமாகப் பிரிக்காதீர்கள்: பல சிறிய சங்க்களை உருவாக்குவது எதிர்விளைவாக இருக்கலாம். ஒவ்வொரு சங்குக்கும் ஒரு தனி HTTP கோரிக்கை தேவைப்படுகிறது, மற்றும் இந்த கோரிக்கைகளின் மேல்நிலை செலவு சிறிய கோப்பு அளவுகளின் நன்மைகளை விட அதிகமாக இருக்கலாம், குறிப்பாக அதிக தாமதமுள்ள மொபைல் நெட்வொர்க்குகளில். ஒரு சமநிலையைக் கண்டறியவும். வழித்தடங்களுடன் தொடங்கி, பின்னர் தந்திரோபாயமாக மிகப்பெரிய அல்லது குறைவாகப் பயன்படுத்தப்படும் கூறுகளை மட்டும் பிரிக்கவும்.
• பயனர் பயணங்களைப் பகுப்பாய்வு செய்யுங்கள்: பயனர்கள் உண்மையில் உங்கள் பயன்பாட்டை எவ்வாறு வழிநடத்துகிறார்கள் என்பதன் அடிப்படையில் உங்கள் குறியீட்டைப் பிரிக்கவும். 95% பயனர்கள் உள்நுழைவுப் பக்கத்திலிருந்து நேரடியாக டாஷ்போர்டுக்குச் சென்றால், உள்நுழைவுப் பக்கத்தில் டாஷ்போர்டின் குறியீட்டை ப்ரீஃபெட்சிங் செய்வதைக் கவனியுங்கள்.
• பொதுவான சார்புகளைக் குழுவாக்குங்கள்: பெரும்பாலான பண்ட்லர்கள் பல வழித்தடங்களில் பயன்படுத்தப்படும் நூலகங்களுக்கான ஒரு பகிரப்பட்ட `vendors` சங்கை தானாக உருவாக்க உத்திகளைக் கொண்டுள்ளன (Webpack-இன் `SplitChunksPlugin` போன்றவை). இது நகலெடுப்பதைத் தடுக்கிறது மற்றும் கேச்சிங்கை மேம்படுத்துகிறது.
• Cumulative Layout Shift (CLS) ஐக் கவனியுங்கள்: கூறுகளை ஏற்றும்போது, உங்கள் ஏற்றுதல் நிலை (ஒரு எலும்புக்கூடு போன்றவை) இறுதி கூறு அதே இடத்தை ஆக்கிரமிப்பதை உறுதிசெய்யுங்கள். இல்லையெனில், கூறு ஏற்றப்படும்போது பக்க உள்ளடக்கம் குதிக்கும், இது ஒரு மோசமான CLS மதிப்பெண்ணுக்கு வழிவகுக்கும்.

முடிவுரை: அனைவருக்கும் ஒரு வேகமான இணையம்

கோட் ஸ்ப்ளிட்டிங் இனி ஒரு மேம்பட்ட, முக்கிய நுட்பம் அல்ல; நவீன, உயர் செயல்திறன் கொண்ட வலைப் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு அடிப்படத் தேவையாகும். ஒரு ஒற்றை மோனோலிதிக் பண்டிலிலிருந்து விலகி, தேவைக்கேற்ப ஏற்றுவதை ஏற்றுக்கொள்வதன் மூலம், உங்கள் பயனர்களுக்கு அவர்களின் சாதனம் அல்லது நெட்வொர்க் நிலைமைகளைப் பொருட்படுத்தாமல் கணிசமாக வேகமான மற்றும் பதிலளிக்கக்கூடிய அனுபவத்தை வழங்க முடியும்.

வழித்தடம்-அடிப்படை கோட் ஸ்ப்ளிட்டிங் உடன் தொடங்குங்கள்—இது மிகப்பெரிய ஆரம்ப செயல்திறன் வெற்றியை வழங்கும் எளிய இலக்காகும். அது நடைமுறைக்கு வந்தவுடன், உங்கள் பயன்பாட்டை ஒரு பண்டில் அனலைசர் மூலம் பகுப்பாய்வு செய்து, கூறு-அடிப்படை பிரித்தலுக்கான வேட்பாளர்களை அடையாளம் காணவும். உங்கள் பயன்பாட்டின் ஏற்றுதல் செயல்திறனை மேலும் செம்மைப்படுத்த பெரிய, ஊடாடும், அல்லது அரிதாகப் பயன்படுத்தப்படும் கூறுகளில் கவனம் செலுத்துங்கள்.

இந்த உத்திகளை சிந்தனையுடன் பயன்படுத்துவதன் மூலம், நீங்கள் உங்கள் வலைத்தளத்தை வேகமாக மாற்றுவது மட்டுமல்ல; நீங்கள் ஒரு நேரத்தில் ஒரு சங் மூலம் உலகளாவிய பார்வையாளர்களுக்கு இணையத்தை மேலும் அணுகக்கூடியதாகவும் சுவாரஸ்யமாகவும் ஆக்குகிறீர்கள்.