Kann react-loadable in create-react-app serverseitig verwendet werden?

Question

Ich versuche Code-Splitting in meiner create-react-app-Anwendung durchzuführen, die serverseitiges Rendering verwendet.

I ‚reagieren-loadable` bin unter Verwendung der Code-Splitting zu tun: https://github.com/thejameskyle/react-loadable

Wie jetzt habe ich einfach meine Home.js Komponente weg vom Rest meiner App geteilt haben, nur um zu sehen, ob es funktioniert. Im Entwicklungsmodus (lesen: nicht SSR), ist es chunked off und funktioniert gut.

Allerdings kann ich nicht Dinge auf dem Server arbeiten. Ich folge der Anleitung auf ihrer Github-Seite und stehe wegen der notwendigen Änderungen am Webpack fest. In create-react-app Anwendungen haben Sie keinen Zugriff auf Webpack, da es versteckt ist.

Der Fehler erhalte ich beim Starten des Servers ist:

return (0, _importInspector.report)(import('../components/home/Home'), { 
               ^^^^^^ 
SyntaxError: Unexpected token import 
at createScript (vm.js:80:10) ... 

Ich bin mir ziemlich sicher, dass es, weil ich webpack nicht korrekt konfiguriert haben, wie in der Anleitung angegeben.

In der Führung, ist es eindeutig für SSR:

Zuerst haben wir Webpack müssen, uns sagen, welche jedes Modul im Inneren lebt bündelt. Dafür gibt es das React Loadable Webpack Plugin.

Importieren Sie das ReactLoadablePlugin von react-loadable/webpack und fügen Sie es in Ihre Webpack-Konfiguration ein. Übergeben Sie einen Dateinamen für den Speicherort der JSON-Daten zu unseren Bundles.

// webpack.config.js 
import { ReactLoadablePlugin } from 'react-loadable/webpack'; 

export default { 
    plugins: [ 
     new ReactLoadablePlugin({ 
      filename: './dist/react-loadable.json', 
     }), 
    ], 
}; 

Ich glaube nicht, das ohne Auswerfen möglich ist. Wer hat eine Idee, wenn react-loadable in einer create-react-app serverseitig gerenderten Anwendung verwendet werden kann?

Answer 1

Import dieser Module an der Spitze des Servers Datei

require('ignore-styles'); 
require('babel-polyfill') 
require('babel-register')({ 
    ignore: [ /(node_modules)/ ], 
    presets: ['es2015', 'react-app'], 
    plugins: [ 
     'syntax-dynamic-import', 
     'dynamic-import-node', 
     'react-loadable/babel' 
    ] 
});