Skip to content
This repository has been archived by the owner on May 15, 2023. It is now read-only.

Commit

Permalink
Split the app by pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamakulov
iamakulov committed Jan 30, 2018
1 parent a4ec643 commit 70011b0
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 16 deletions.
16 changes: 1 addition & 15 deletions src/index.js → src/app.js
View file
Expand Up @@ -19,25 +19,11 @@

import 'babel-polyfill';

import renderHome from './components/Home';
import renderUser from './components/User';
import initDevelopmentHelpers from './initDevelopmentHelpers';

// This sets up things that help you during development.
// Feel free to not think about this call.
initDevelopmentHelpers();

const path = window.location.pathname;

switch (path) {
case '/':
renderHome(document.querySelector('#root'));
break;

case '/users/':
renderUser(document.querySelector('#root'));
break;

default:
throw new Error('Unknown page. Try going to / or /users/');
}
renderUser(document.querySelector('#root'));
15 changes: 15 additions & 0 deletions src/landing.js
View file
@@ -0,0 +1,15 @@
/**
* This is the app entry point. It detects the current page
* and renders the corresponding component.
*/

import 'babel-polyfill';

import renderHome from './components/Home';
import initDevelopmentHelpers from './initDevelopmentHelpers';

// This sets up things that help you during development.
// Feel free to not think about this call.
initDevelopmentHelpers();

renderHome(document.querySelector('#root'));
5 changes: 4 additions & 1 deletion webpack.config.js
View file
Expand Up @@ -26,7 +26,8 @@ console.log(

module.exports = {
entry: {
main: './src/index.js',
app: './src/app.js',
landing: './src/landing.js',
},
output: {
path: path.resolve(__dirname, 'public', 'build'),
Expand Down Expand Up @@ -67,11 +68,13 @@ module.exports = {
// Emit HTML files that serve the app
new HtmlWebpackPlugin({
template: 'src/templates/landing.html',
chunks: ['landing', 'vendor', 'runtime'],
filename: path.resolve(__dirname, 'public/index.html'),
alwaysWriteToDisk: true,
}),
new HtmlWebpackPlugin({
template: 'src/templates/app.html',
chunks: ['app', 'vendor', 'runtime'],
filename: path.resolve(__dirname, 'public/users/index.html'),
alwaysWriteToDisk: true,
}),
Expand Down

1 comment on commit 70011b0

@iamakulov
Copy link
Contributor Author

@iamakulov iamakulov commented on 70011b0 Jan 30, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit splits the app by pages using entry points. Corresponding article section

The idea behind this is as follows. The / and the /users/ pages are separate. When a user visits the landing (/), they don’t need to load the app code. We split the app by entry points to avoid downloading extra bytes.

Generated files
Before:

0.d93c72573d76a67fd44a.js       · 2.28 kB
1.70f9f5c7b6922d94e3ac.js       · 2.28 kB
2.8429a2eecb723f648aac.js       · 2.52 kB
runtime.e6e6dbc8636f21ac4610.js · 1.5 kB
vendor.affc614bbe6166cee297.js  · 143 kB
main.dbd723a68f0cea08d30d.js    · 8.46 kB
src/users/index.html            · 2.05 kB
src/index.html                  · 2.33 kB

After:

0.d93c72573d76a67fd44a.js       · 2.28 kB
1.70f9f5c7b6922d94e3ac.js       · 2.28 kB
2.8429a2eecb723f648aac.js       · 2.52 kB
runtime.e6e6dbc8636f21ac4610.js · 1.52 kB
vendor.affc614bbe6166cee297.js  · 143 kB
app.482f813016d3a06218b7.js     · 7.93 kB
landing.d46fa9b3bf4fe37ce968.js · 2.17 kB
src/users/index.html            · 2.08 kB
src/index.html                  · 2.35 kB

In our case, splitting the code by entry points doesn’t provide a large benefit because the app is small. However, in a larger app, this might have a great effect.

Please sign in to comment.