code-splitting

I'm using the react/react-router/webpack stack with dynamic routing between my different pages of the app which means every page loads asynchronously by demand. Everything works great but when I deploy a new version, my current active users who didn't fetch all of the Js file of all the pages will get stuck once the'll try to navigate to another page they haven't visited yet. EXAMPLE lets say I have a code split app with the following .js generated files and md5 (for cache busting): main.123.js profile.456.js User visits my main page and gets only main.123.js . In the meantime I deploy a new

The main problem is while code splitting with react-routerV4 and then webpack 2, I have modules that are in several chunks that I can't get to the main one. My configuration is as follow : Webpack 2.2.1 React-route 4.1.1 I'm using the code splitting as in the react-router v4 documentation Basically, I don't use the import, but on the route configuration I have : something like this : import loadHome from 'bundle-loader?lazy&name=home-chunk!./pages/market/Home'; [ { path: url1, component: props => <Bundle load={loadHome}>{Home => <Home {...props} />}</Bundle>, exact: true, }, // other routes ]

I have an app structure like this: ├── /dashboard │ ├── dashboard.css │ ├── dashboard.html │ ├── dashboard.component.ts │ ├── dashboard.service.ts │ ├── index.ts ├── /users │ ├── users.css │ ├── users.html │ ├── users.component.ts │ ├── users.service.ts │ ├── index.ts ├── /login │ ├── login.css │ ├── login.html │ ├── login.component.ts │ ├── login.service.ts │ ├── index.ts ├── app.component.ts ├── app.module.ts ├── app.routes.ts ├── app.styles.css And I want to code split my app into something like this: ├── dashboard.js ├── users.js ├── login.js ├── app.js I cannot seem to find an example of

Building a ReactJS application with Webpack. Recently interested in using code splitting to reduce app size. I've tried implementing a custom HOC that wrapped System.import(): /* async/index.tsx */ ... at a very high level looked like... class Async extends React ... { componentWillMount() { this.props.load.then(c => { this.component = c; this.setState({loaded:true}); } } render() { return this.component ? <this.component.default {...this.props} /> : <span />; } } /* async/foo/index.tsx */ import Async from 'async'; const Foo = (props) => ( <Async {...props} load={System.import('async/foo/body

If I make changes to my angular app the chunk names will change on build and the old version will be remove from the dist folder. Once deployed if a user is currently on the site and then navigated to another part of the site I get a loading chunk failed error as the old file is no longer there. My app is built using angular cli so it's packaged using webpack. Is there anyway this can be overcome. I keep my old chunks in place for a couple days after an update for just this purpose. My app also consists of mini-SPAs, so as they move around, they're likely to pick up the new version during a

In a webpack 3 configuration I would use the code below to create separate vendor.js chunk: entry: { client: ['./client.js'], vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], }, output: { filename: '[name].[chunkhash].bundle.js', path: '../dist', chunkFilename: '[name].[chunkhash].bundle.js', publicPath: '/', }, plugins: [ new webpack.HashedModuleIdsPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', }), new webpack.optimize.CommonsChunkPlugin({ name: 'runtime', }), ], With all the changes I'm not sure how to do it with Webpack 4. I know that CommonChunksPlugin was

I'm going migrate to Redux. My application consists of a lot of parts (pages, components) so I want to create many reducers. Redux examples show that I should use combineReducers() to generate one reducer. Also as I understand Redux application should have one store and it is created once the application starts. When the store is being created I should pass my combined reducer. This makes sense if the application is not too big. But what if I build more than one JavaScript bundle? For example, each page of application has own bundle. I think in this case the one combined reducer is not good. I