Bundlen analysointi ja koodin jakamisen strategia
Analysoikaa bundlen koko rollup-plugin-visualizerilla ja määrittäkää reittikohtainen koodinjakostrategia.
Bundlen analysointi ja koodin jakamisen strategia on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.
Miksi paketin koolla on merkitystä
Suuret JavaScript-paketit viivästyttävät Time To Interactive -mittaria. Jokainen JavaScriptin kilotavu on ladattava, jäsennettävä ja suoritettava ennen kuin sivu muuttuu vuorovaikutteiseksi – erityisesti hitaissa mobiiliverkoissa.
Analysointi rollup-plugin-visualizerilla
Käyttäkää Vite-projekteissa visualizer-laajennusta treemap-kaavion luomiseen paketista. Kaaviosta näette, mitkä moduulit vievät eniten tilaa.
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
visualizer({ open: true, gzipSize: true, brotliSize: true })
],
});
// After build, open the generated HTML file to explore the treemapNext.js Bundle Analyzer
Käyttäkää @next/bundle-analyzer-työkalua Next.js:n palvelin- ja selainpakettien analysointiin.
npm install @next/bundle-analyzer
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});
// Run:
// ANALYZE=true npm run buildReittipohjainen koodin jakaminen
Vaikuttavin jakamistapa on ladata kunkin reitin koodi vasta, kun käyttäjä siirtyy kyseiselle reitille. React Routerin lazy() ja Next.js:n App Router tekevät tämän automaattisesti.
// React Router v6 with lazy loading
import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
<Routes>
<Route path="/dashboard" element={<Suspense fallback={<Loading />}><Dashboard /></Suspense>} />
<Route path="/settings" element={<Suspense fallback={<Loading />}><Settings /></Suspense>} />
</Routes>Komponenttitason koodin jakaminen
Siirtäkää raskaiden komponenttien, kuten karttojen, kaavioiden ja editorien, lataaminen myöhemmäksi lazy()-funktion avulla, kunnes niitä tarvitaan.
const MonacoEditor = lazy(() => import('@monaco-editor/react'));
const MapView = lazy(() => import('./MapView'));
function ProductEditor({ showMap }) {
return (
<>
<Suspense fallback={<EditorSkeleton />}><MonacoEditor /></Suspense>
{showMap && <Suspense fallback={<MapSkeleton />}><MapView /></Suspense>}
</>
);
}Dynaaminen tuonti ehdollisia ominaisuuksia varten
Tuokaa suuret kirjastot vasta, kun ominaisuus otetaan käyttöön, jotta niitä ei tarvitse ladata kaikille käyttäjille.
async function exportToPDF() {
const { default: jsPDF } = await import('jspdf'); // ~300KB — loaded on demand
const doc = new jsPDF();
doc.text('Hello', 10, 10);
doc.save('export.pdf');
}Tree shaking
Nykyaikaiset bundlerit poistavat käyttämättömät viennit eli kuolleen koodin. Varmistakaa tree shakingin toiminta käyttämällä ESM:ää tukevia riippuvuuksia (ei CJS:ää) ja välttäkää kokonaisten kirjastojen tuomista, jos käytätte vain yhtä funktiota.
// Bad — imports entire lodash (~70KB):
import _ from 'lodash';
const result = _.debounce(fn, 300);
// Good — imports only debounce (<2KB):
import debounce from 'lodash/debounce';
// or with tree-shaking-friendly lodash-es:
import { debounce } from 'lodash-es';Kriittisten palasten esilataus
Käyttäkää <link rel='modulepreload'>-elementtiä tai Webpackin magic comment -kommentteja seuraavan sivun palasen esilataamiseen, kun käyttäjä on vielä nykyisellä sivulla.
// Webpack magic comment — preload on hover:
const Dashboard = lazy(() => import(/* webpackPrefetch: true */ './Dashboard'));
// or preload (higher priority):
const Dashboard = lazy(() => import(/* webpackPreload: true */ './Dashboard'));Kolmansien osapuolten vaikutuksen analysointi
Selvittäkää bundlephobia.com-sivuston tai Import Cost VS Code -laajennuksen avulla minkä tahansa npm-paketin gzipatun koon ennen sen asentamista.
Pakettibudjetin määrittäminen
Asettakaa reittikohtainen kokoraja Webpackin tai Viten asetuksissa. Koonti epäonnistuu, jos palanen ylittää budjetin, jolloin CI havaitsee tahattomat koon kasvut.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: {
'vendor-react': ['react', 'react-dom'],
'vendor-router': ['react-router-dom'],
},
},
},
chunkSizeWarningLimit: 200, // warn at 200KB
},Pikatarkistus
Mikä on vaikuttavin koodin jakamisen strategia React-SPA-sovelluksille, joissa on paljon sivuja?
Kertaus
Analysoikaa paketit rollup-plugin-visualizerilla tai @next/bundle-analyzerilla. Käyttäkää reitti- ja komponenttitason lazy()-jakoa. Hyödyntäkää tree shakingia tuomalla vain tarvitsemanne. Asettakaa kokobudjetit CI:ssä ja käyttäkää esihakua tai esilatausta ohjaavia vihjeitä seuraavaa todennäköistä reittiä varten.
Opi React tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”Bundlen analysointi ja koodin jakamisen strategia” ilmainen?
Kyllä – oppitunnin ”Bundlen analysointi ja koodin jakamisen strategia” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Bundlen analysointi ja koodin jakamisen strategia”?
Analysoikaa bundlen koko rollup-plugin-visualizerilla ja määrittäkää reittikohtainen koodinjakostrategia. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Bundlen analysointi ja koodin jakamisen strategia”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?
Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Core Web Vitals -mittaus React-sovelluksissa
- Bundlen analysointi ja koodin jakamisen strategia
- Kuvien ja fonttien optimointi Reactissa
- INP:n pienentäminen: tapahtumankäsittelijöiden optimointi