Using two different entry points for two similar apps
I am using react with gulp and browser. I am working on a site where I want to inject react elements in two different places (URLs). The elements are different, but most of the base components are reused.
How to react correctly, which component to display where if you have multiple entry points?
I could easily create two different js files and upload the corresponding file to the appropriate page. But as far as I understand it will also load all libraries and components twice and impose unnecessary load on the server.
I could also use different IDs for entry points and catch "The target container is not a DOM element". errors in case the identifier is not found, but it is wrong.
Thanks for your help!
source to share
Individual URLs are separate HTTP requests, so the entire page content is reloaded when someone visits any URL. Imagine the "sources" tab of your chrome web inspector to be a more efficient way of reading one long file using html, css and javascript. React and all other libraries are included in one long file for any of your pages.
Your decision to "create two different js files and upload the corresponding file on the appropriate page" is the correct answer and will not have "unnecessary load on the server".
The solution to server overloading will be to implement caching and serving modules through a CDN.
source to share
It sounds like you are asking about code decomposition. For this, I recommend using webpack. There's documentation on code splitting and an example of multiple entry point code splitting .
The webpack config looks like this:
var path = require("path");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
pageA: "./pageA",
pageB: "./pageB"
},
output: {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
},
plugins: [
new CommonsChunkPlugin("commons.js")
]
}
disclaimer: I have not tried this.
source to share