can u describe your code splitting flow in details and what is use of dll_vender.js ? about react-redux-universal-hot-example HOT 9 CLOSED

No problem, you will excuse me for my bad English sprinkled with Google translation.

To start dll_vendor.js is just HappyPack, which allows to significantly reduce the first build time when doing a npm run dev.
It is only enabled for development and created a dll from this config file (webpack/vendor.config.js#L61L77). If you need you can add a package to the list and do a npm run build-dlls
This allows not to rebuild the packages listed in the config.

For the splitting code it is very simple: with webpack 2 it is enough to add a System.import (return a promise) to load a resource only when it is required and all those that it include if they are not already included elsewhere in the initial bundle.
Recently with react-router it is possible to pass a promise (react-router#3719) to a getComponent props to do dynamic routing. (cf: src/routes.js)

If you want to add a route to lazy loading you will need to remove the container from container/index.js, and all components that it includes from components/index.js.

from react-redux-universal-hot-example.

You can not index a file that is meant to be in a chunk, that would connect it to the main bundle.

I do not see how it would be possible to get around this, if someone has an idea.

from react-redux-universal-hot-example.

ok thanks looks great. what if I need to load a specific file file1.js from domain.com/js/file1.js for route1 and route2 while route3, route3, route5 does not need that file.

from react-redux-universal-hot-example.

Just as I described above, webpack should do its job.

from react-redux-universal-hot-example.

@bertho-zero I appreciate your explanation! But I have another question, doesn't doing so will eliminate the handy way of importing components/containers by just using

import { ContainerName } from 'containers'

?

Because by removing necessary containers export from containers/index.js we also can't import it directly using resolved path 'containers' from other components, because the module is simply not exported and not there. I appreciate the answer.

from react-redux-universal-hot-example.

You didnt need to import it before with import { ContainerName } from 'containers', as you are importing directly here <Route path="path123" getComponent={() => System.import('./containers/ContainerName')}/>

from react-redux-universal-hot-example.

@Swapnilchavan18 Thank you for the reply. No, I mean in the current containers, say, src/containers/About/About.js, it uses resolved path components/MiniInfoBar/MiniInfoBar. I want to include other containers inside my container and I can't use the resolved path because then it will be included in the main.js (I tried this). Hence, no code splitting. Is there any workaround?

from react-redux-universal-hot-example.

@bertho-zero when i used webpack 2.2 and System.import inside src/route.js file.
it gives eslint error 'System' is not defined no-undef.
than i added exception in .eslintrc file "no-undef": 0 in rules
Now i am getting new error ./~/browserify-sign/browser/algorithms.json
/var/www/projectfolder/node_modules/browserify-sign/browser/algorithms.json Unexpected token (2:27)
You may need an appropriate loader to handle this file type.

finally solved it by adding json-loader in webpack rules
{ test: /.json$/, use: [ 'json-loader' ] }

from react-redux-universal-hot-example.

@bertho-zero when i use webpack 2 and System.import syntax in getComponent prop of Route component inside /src/route.js
it loads component when its in browser but after component is loaded when browser tab is refreshed, server is not able to load component on Server side and hence server is not able to response.
It does not give any error just page request get timeout.

from react-redux-universal-hot-example.