mit Webpack-Code-Aufteilung, wie Chunks und HTML-Layout zu laden?

Question

Ich benutze Webpack um Chunks zu erstellen, die bei Bedarf geladen werden (Code-Splitting); Jeder Chunk rendert Komponenten in DOM-Elemente (divs) umwandeln. Ich brauche HTML, um diese divs zu erstellen: Wie und wann sollte ich den entsprechenden HTML laden? Und wie sollte ich die Brocken bei Bedarf laden?

Ich benutze jQuery load Funktion zum Einfügen von HTML aus Dateien im Container divs. Zusätzlich habe ich einen <script> Tag angegeben, um zu sagen, welcher Chunk geladen werden sollte, aber ich finde es ungeschickt und nicht elegant im Vergleich zum Rest meines Anwendungscodes.

Gibt es einen weniger spröden Weg, dies zu tun?

Answer 1

Es stellt sich heraus, dass das, was ich über react-router getan werden kann erreichen wollte, einfach die ich nicht kannte;)

<Route name="app" component={require('./app.jsx')}> 
    <Route path="/" name="home" component={require('./homepage-container.jsx')}/> 
    <Route path="/otherpath" name="other" component={require('./other.jsx')}/> 
    ... add as many routes as wanted 
</Route> 

Die jsx Dateien bei Bedarf geladen werden, und es besteht keine Notwendigkeit für einfache HTML wie ich rede das Design ist, dass jedes Teil eine Komponente ist. In diesem Beispiel genügt es, eine Verbindung zu #/otherpath zu aktivieren, um die other Komponente zu erhalten, die als untergeordnetes Element der übergeordneten Komponente geladen wird (Route mit der Bezeichnung app).

Answer 2

Sie sollten require.ensure zum dynamischen Laden der Route verwenden. Noch besser, wenn Sie Ihr Projekt für die Verwendung von Webpack 2 + Tree Shaking einrichten, können Sie System.import verwenden.

Hier ist, wie:

import App from 'containers/App'; 
 
function errorLoading(err) { 
 
    console.error('Dynamic page loading failed', err); 
 
} 
 
function loadRoute(cb) { 
 
    return (module) => cb(null, module.default); 
 
} 
 
export default { 
 
    component: App, 
 
    childRoutes: [ 
 
    { 
 
     path: '/', 
 
     getComponent(location, cb) { 
 
     System.import('pages/Home') 
 
      .then(loadRoute(cb)) 
 
      .catch(errorLoading); 
 
     } 
 
    }, 
 
    { 
 
     path: 'blog', 
 
     getComponent(location, cb) { 
 
     System.import('pages/Blog') 
 
      .then(loadRoute(cb)) 
 
      .catch(errorLoading); 
 
     } 
 
    } 
 
    ] 
 
};

Sie können die gesamte Führung in diesem Blog-Post bekommen: Automatic Code Splitting for React Router