How to code split in a single page application in react?
I have a huge application that I have written in reactjs and redux.
My question is how is, how do I reduce the page size? I know there is code splitting in webpack, but my understanding is that it is used for multi page apps. I just have one index.js page.
What am I missing here. How do I have separate js files for different pages to reduce file size for a page, and also to reduce initial page load?
reactjs webpack
asked Feb 25 '16 at 18:41
RisonRison
815
add a comment |
I have a huge application that I have written in reactjs and redux.
My question is how is, how do I reduce the page size? I know there is code splitting in webpack, but my understanding is that it is used for multi page apps. I just have one index.js page.
What am I missing here. How do I have separate js files for different pages to reduce file size for a page, and also to reduce initial page load?
reactjs webpack
asked Feb 25 '16 at 18:41
RisonRison
815
You can do this with React Router: github.com/reactjs/react-router/blob/master/docs/guides/… - I'm sure the basic idea would apply to a different router though.
– Matt Holland
Feb 25 '16 at 18:49
1
You might want to take a look at this video from the React Conf two days ago. It explains some concepts like requiring modules as you need them instead of loading everything from the beginning
– nbermudezs
Feb 25 '16 at 18:54
Thanks @MattHolland. Although, I was using react-router, I was not aware of the dynamic routing.
– Rison
Feb 25 '16 at 21:44
add a comment |
I have a huge application that I have written in reactjs and redux.
My question is how is, how do I reduce the page size? I know there is code splitting in webpack, but my understanding is that it is used for multi page apps. I just have one index.js page.
What am I missing here. How do I have separate js files for different pages to reduce file size for a page, and also to reduce initial page load?
reactjs webpack
asked Feb 25 '16 at 18:41
RisonRison
815
I have a huge application that I have written in reactjs and redux.
My question is how is, how do I reduce the page size? I know there is code splitting in webpack, but my understanding is that it is used for multi page apps. I just have one index.js page.
What am I missing here. How do I have separate js files for different pages to reduce file size for a page, and also to reduce initial page load?
reactjs webpack
reactjs webpack
asked Feb 25 '16 at 18:41
RisonRison
815
asked Feb 25 '16 at 18:41
RisonRison
815
asked Feb 25 '16 at 18:41
RisonRison
815
asked Feb 25 '16 at 18:41
RisonRison
815
asked Feb 25 '16 at 18:41
RisonRison
815
815
You can do this with React Router: github.com/reactjs/react-router/blob/master/docs/guides/… - I'm sure the basic idea would apply to a different router though.
– Matt Holland
Feb 25 '16 at 18:49
1
You might want to take a look at this video from the React Conf two days ago. It explains some concepts like requiring modules as you need them instead of loading everything from the beginning
– nbermudezs
Feb 25 '16 at 18:54
Thanks @MattHolland. Although, I was using react-router, I was not aware of the dynamic routing.
– Rison
Feb 25 '16 at 21:44
add a comment |
You can do this with React Router: github.com/reactjs/react-router/blob/master/docs/guides/… - I'm sure the basic idea would apply to a different router though.
– Matt Holland
Feb 25 '16 at 18:49
1
You might want to take a look at this video from the React Conf two days ago. It explains some concepts like requiring modules as you need them instead of loading everything from the beginning
– nbermudezs
Feb 25 '16 at 18:54
Thanks @MattHolland. Although, I was using react-router, I was not aware of the dynamic routing.
– Rison
Feb 25 '16 at 21:44
You can do this with React Router: github.com/reactjs/react-router/blob/master/docs/guides/… - I'm sure the basic idea would apply to a different router though.
– Matt Holland
Feb 25 '16 at 18:49
You can do this with React Router: github.com/reactjs/react-router/blob/master/docs/guides/… - I'm sure the basic idea would apply to a different router though.
– Matt Holland
Feb 25 '16 at 18:49
1
1
You might want to take a look at this video from the React Conf two days ago. It explains some concepts like requiring modules as you need them instead of loading everything from the beginning
– nbermudezs
Feb 25 '16 at 18:54
You might want to take a look at this video from the React Conf two days ago. It explains some concepts like requiring modules as you need them instead of loading everything from the beginning
– nbermudezs
Feb 25 '16 at 18:54
Thanks @MattHolland. Although, I was using react-router, I was not aware of the dynamic routing.
– Rison
Feb 25 '16 at 21:44
Thanks @MattHolland. Although, I was using react-router, I was not aware of the dynamic routing.
– Rison
Feb 25 '16 at 21:44
add a comment |
1 Answer
1
active
oldest
votes
What you described would be best called commons split, in which you track the common dependencies for the many different pages of your app and put them all in a separate bundle.
There's a few ways in which you can benefit from bundle splitting in a SPA. The simplest one would be separating all vendor modules into a single bundle, so that when you change code in the main app, the user doesn't have to download dependencies again (e.g: jquery), because it's cached.
Example: your app uses React. But you changed something inside a component, not React itself. You build and deploy again. Your bundle file will be different (sometimes even with a new name hash). If you don't use some sort of vendor split technique, the user will have to download React again, albeit not having it changed.
The basic configuration would be using splitChunks which added much more automation in comparison to old CommonsChunkPlugin. So, a beginners way to take advantage of it would be having the following config in your Webpack production config:
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
,
,
,
]);
If you want to dig into it and achieve more sophisticated, customized ends, you can make use of splitChunks documentation here. One example would be using .cacheGroups option, and providing a regular expression to determine matching files for a given group.
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
cacheGroups:
vendors:
test: /[\/]node_modules[\/]/,
,
,
,
]);
Take a look at this guide for advanced guiding on the topic.
answered Nov 14 '18 at 3:03
zavjszavjs
1717
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35635605%2fhow-to-code-split-in-a-single-page-application-in-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What you described would be best called commons split, in which you track the common dependencies for the many different pages of your app and put them all in a separate bundle.
There's a few ways in which you can benefit from bundle splitting in a SPA. The simplest one would be separating all vendor modules into a single bundle, so that when you change code in the main app, the user doesn't have to download dependencies again (e.g: jquery), because it's cached.
Example: your app uses React. But you changed something inside a component, not React itself. You build and deploy again. Your bundle file will be different (sometimes even with a new name hash). If you don't use some sort of vendor split technique, the user will have to download React again, albeit not having it changed.
The basic configuration would be using splitChunks which added much more automation in comparison to old CommonsChunkPlugin. So, a beginners way to take advantage of it would be having the following config in your Webpack production config:
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
,
,
,
]);
If you want to dig into it and achieve more sophisticated, customized ends, you can make use of splitChunks documentation here. One example would be using .cacheGroups option, and providing a regular expression to determine matching files for a given group.
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
cacheGroups:
vendors:
test: /[\/]node_modules[\/]/,
,
,
,
]);
Take a look at this guide for advanced guiding on the topic.
answered Nov 14 '18 at 3:03
zavjszavjs
1717
add a comment |
What you described would be best called commons split, in which you track the common dependencies for the many different pages of your app and put them all in a separate bundle.
There's a few ways in which you can benefit from bundle splitting in a SPA. The simplest one would be separating all vendor modules into a single bundle, so that when you change code in the main app, the user doesn't have to download dependencies again (e.g: jquery), because it's cached.
Example: your app uses React. But you changed something inside a component, not React itself. You build and deploy again. Your bundle file will be different (sometimes even with a new name hash). If you don't use some sort of vendor split technique, the user will have to download React again, albeit not having it changed.
The basic configuration would be using splitChunks which added much more automation in comparison to old CommonsChunkPlugin. So, a beginners way to take advantage of it would be having the following config in your Webpack production config:
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
,
,
,
]);
If you want to dig into it and achieve more sophisticated, customized ends, you can make use of splitChunks documentation here. One example would be using .cacheGroups option, and providing a regular expression to determine matching files for a given group.
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
cacheGroups:
vendors:
test: /[\/]node_modules[\/]/,
,
,
,
]);
Take a look at this guide for advanced guiding on the topic.
answered Nov 14 '18 at 3:03
zavjszavjs
1717
add a comment |
What you described would be best called commons split, in which you track the common dependencies for the many different pages of your app and put them all in a separate bundle.
There's a few ways in which you can benefit from bundle splitting in a SPA. The simplest one would be separating all vendor modules into a single bundle, so that when you change code in the main app, the user doesn't have to download dependencies again (e.g: jquery), because it's cached.
Example: your app uses React. But you changed something inside a component, not React itself. You build and deploy again. Your bundle file will be different (sometimes even with a new name hash). If you don't use some sort of vendor split technique, the user will have to download React again, albeit not having it changed.
The basic configuration would be using splitChunks which added much more automation in comparison to old CommonsChunkPlugin. So, a beginners way to take advantage of it would be having the following config in your Webpack production config:
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
,
,
,
]);
If you want to dig into it and achieve more sophisticated, customized ends, you can make use of splitChunks documentation here. One example would be using .cacheGroups option, and providing a regular expression to determine matching files for a given group.
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
cacheGroups:
vendors:
test: /[\/]node_modules[\/]/,
,
,
,
]);
Take a look at this guide for advanced guiding on the topic.
answered Nov 14 '18 at 3:03
zavjszavjs
1717
What you described would be best called commons split, in which you track the common dependencies for the many different pages of your app and put them all in a separate bundle.
There's a few ways in which you can benefit from bundle splitting in a SPA. The simplest one would be separating all vendor modules into a single bundle, so that when you change code in the main app, the user doesn't have to download dependencies again (e.g: jquery), because it's cached.
Example: your app uses React. But you changed something inside a component, not React itself. You build and deploy again. Your bundle file will be different (sometimes even with a new name hash). If you don't use some sort of vendor split technique, the user will have to download React again, albeit not having it changed.
The basic configuration would be using splitChunks which added much more automation in comparison to old CommonsChunkPlugin. So, a beginners way to take advantage of it would be having the following config in your Webpack production config:
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
,
,
,
]);
If you want to dig into it and achieve more sophisticated, customized ends, you can make use of splitChunks documentation here. One example would be using .cacheGroups option, and providing a regular expression to determine matching files for a given group.
const productionConfig = merge([
// ... other configs
optimization:
splitChunks:
chunks: "initial",
cacheGroups:
vendors:
test: /[\/]node_modules[\/]/,
,
,
,
]);
Take a look at this guide for advanced guiding on the topic.
answered Nov 14 '18 at 3:03
zavjszavjs
1717
answered Nov 14 '18 at 3:03
zavjszavjs
1717
answered Nov 14 '18 at 3:03
zavjszavjs
1717
answered Nov 14 '18 at 3:03
zavjszavjs
1717
1717
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35635605%2fhow-to-code-split-in-a-single-page-application-in-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can do this with React Router: github.com/reactjs/react-router/blob/master/docs/guides/… - I'm sure the basic idea would apply to a different router though.
– Matt Holland
Feb 25 '16 at 18:49
1
You might want to take a look at this video from the React Conf two days ago. It explains some concepts like requiring modules as you need them instead of loading everything from the beginning
– nbermudezs
Feb 25 '16 at 18:54
Thanks @MattHolland. Although, I was using react-router, I was not aware of the dynamic routing.
– Rison
Feb 25 '16 at 21:44