Edit2: Modificata la regex in modo che corrisponda ai percorsi dei file della finestra e la divisione del codice si sta verificando. Ma i miei componenti figli nella mia root non verranno ancora caricati.Divisione del codice in modo implicito con Webpack, router di risposta del caricatore di bundle
Modifica: Il mio codice è cambiato dalla scorsa settimana, ma sono ancora bloccato su questo problema (e ho bisogno di dichiarare i miei percorsi in modo dichiarativo, quindi utilizzando JSX).
Prima di tutto, sto usando Webpack 1.x con React, react-router, bundle-loader, Babel6, ES6 e airbnb-eslint-config.
Ho provato a seguire Henley Edition's article sulla suddivisione del codice e il caricamento di blocchi (con il suo example repo), in base a React's huge app example.
Ma non riuscivo a fare bundle-loader dividere il mio codice in pezzi ...
Ecco il mio codice:
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const nodeDir = `${__dirname}/node_modules`;
const routeComponentRegex = /src[\/\\]views[\/\\]([^\/\\]+)[\/\\]js[\/\\]([^\/\\]+).js$/;
const paths = [ // Only to test which files match the regex, juste in case
'src/views/index/js/Index.js',
'src/views/login-page/js/LoginForm.js',
'src/common/main-content/js/MainContent.js',
'src/routes/main.js',
];
console.log(routeComponentRegex.test(paths[0])); // prints 'true'
console.log(routeComponentRegex.test(paths[1])); // prints 'true'
console.log(routeComponentRegex.test(paths[2])); // prints 'false'
console.log(routeComponentRegex.test(paths[3])); // prints 'false'
const config = {
resolve: {
alias: {
react: `${nodeDir}/react`,
'react-dom': `${nodeDir}/react-dom`,
'react-router': `${nodeDir}/react-router`,
'react-fetch': `${nodeDir}/react-fetch`,
'react-cookie': `${nodeDir}/react-cookie`,
'react-bootstrap': `${nodeDir}/react-bootstrap`,
'react-bootstrap-daterangepicker': `${nodeDir}/react-bootstrap-daterangepicker`,
'react-bootstrap-datetimepicker': `${nodeDir}/react-bootstrap-datetimepicker`,
velocity: `${nodeDir}/velocity-animate`,
moment: `${nodeDir}/moment`,
slimscroll: `${nodeDir}/slimscroll`,
},
},
entry: {
app: './client/src/routes/js/main',
vendors: [
'react', 'react-dom',
'react-router', 'react-fetch', 'react-cookie',
'react-bootstrap', 'react-bootstrap-daterangepicker', 'react-bootstrap-datetimepicker',
'velocity', 'moment', 'slimscroll',
],
},
output: {
path: path.join(__dirname, 'public/dist'),
publicPath: '/dist/',
filename: 'bundles/[name].bundle.js',
chunkFilename: 'chunks/[name].chunk.js',
},
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'client'),
exclude: routeComponentRegex,
loader: 'babel',
},
{
test: /\.css$/,
include: path.join(__dirname, 'client'),
exclude: routeComponentRegex,
loader: 'style!css-loader?modules&importLoaders=1' +
'&localIdentName=[name]__[local]___[hash:base64:5]',
},
{
test: routeComponentRegex,
include: path.join(__dirname, 'client'),
loaders: ['bundle?lazy', 'babel'],
},
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'bundles/vendors.js', Infinity),
],
};
module.exports = config;
client/src/views/main-content/js/MainContent.js
import React from 'react';
import { Link } from 'react-router';
const MainContent = (props) => (
<div>
<h1>App</h1>
<ul>
<li><Link to="/login">Login</Link></li>
</ul>
{props.children}
</div>
);
MainContent.propTypes = {
children: React.PropTypes.node.isRequired,
};
export default MainContent;
/src/views/index pubblico/js/Index.js
import React from 'react';
const Index =() => (
<h2>Index Page</h2>
);
export default Index;
pubblico/src/views/login/js/Login.js
import React from 'react';
const LoginForm =() => (
<div className="box box-default">
<h2>Login Page</h2>
</div>
);
export default LoginForm;
Punto di ingresso (client/src/routes/main.js):
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import MainContent from '../../common/main-content/js/MainContent';
// modules supposed to be loaded lazily
import Index from '../../views/index/js/Index';
import Login from '../../views/login/js/Login';
import ShortOffers from '../../views/short-offers/js/ShortOffers';
import CreateJobOffer from '../../views/create-job-offer/js/CreateJobOffer';
function lazyLoadComponent(lazyModule) {
return (location, cb) => {
lazyModule(module => {
cb(null, module);
});
};
}
function lazyLoadComponents(lazyModules) {
return (location, cb) => {
const moduleKeys = Object.keys(lazyModules);
const promises = moduleKeys.map(key =>
new Promise(resolve => lazyModules[key](resolve))
);
Promise.all(promises).then(modules => {
cb(null, modules.reduce((obj, module, i) => {
obj[moduleKeys[i]] = module;
return obj;
}, {}));
});
};
}
render((
<Router history={browserHistory}>
<Route path="/" component={MainContent}>
<IndexRoute getComponent={lazyLoadComponent(Index)} />
<Route path="short-offers" getComponent={lazyLoadComponent(ShortOffers)} />
<Route path="create-job-offer" getComponent={lazyLoadComponent(CreateJobOffer)} />
</Route>
<Route path="login" getComponent={lazyLoadComponent(Login)} />
</Router>
), document.getElementById('content'));
Ora uscita webpack
's:
Hash: a885854f956aa8d2a00c
Version: webpack 1.13.0
Time: 6321ms
Asset Size Chunks Chunk Names
bundles/app.bundle.js 84.7 kB 0 [emitted] app
bundles/vendors.js 2.55 MB 1 [emitted] vendors
chunk {0} bundles/app.bundle.js (app) 89 kB {1} [rendered]
[0] multi app 28 bytes {0} [built]
+ 26 hidden modules
chunk {1} bundles/vendors.js (vendors) 2.45 MB [rendered]
[0] multi vendors 148 bytes {1} [built]
+ 626 hidden modules
Sede, non pacchi :(Se ho capito bene, la terza pala in webpack.config.js
dovrebbe prendersi cura di file importati in file .js e trasformarli in chunks
, in modo che potessero essere caricato dynamically (and lazily)
.
Inoltre, le mie pagine non vengono caricate. Se prendo il codice frazionamento fuori dal quadro, funziona:
render((
<Router history={browserHistory}>
<Route path="/" component={MainContent}>
<IndexRoute component={Index} />
<Route path="short-offers" getComponent={ShortOffers} />
<Route path="create-job-offer" getComponent={CreateJobOffer} />
</Route>
<Route path="login" getComponent={LoginPage} />
</Router>
), document.getElementById('content'));
Ma, la mia app sta andando essere enorme e ho assolutamente bisogno del codice-splitting.
Qualcuno vorrebbe avere un pezzo di intuizione per darmi?
Grazie in anticipo!
Ciao, grazie, ma ho solo una webpack. file config.js ... Ho provato lo stesso, ma senza fortuna. Ho adottato l'originale esempio di app di React, dal momento che, grazie comunque! – Zephir77167
Ciao. Non ho altra scelta che implementare la tua strada nel mio codice (che è bello perché amo il modo dichiarativo del JSX). Ho aggiornato il mio codice, potresti per favore dare un'occhiata? Molte grazie! – Zephir77167