Entry Points
The webpack configuration included with the theme_boilerplate project will automatically perform code-splitting and output a separate bundle for each file with a .js or .jsx extension in the src/entries/ directory.
Each file will result in an ouput bundle following the pattern [name].bundle.js in development, and a pattern of [name].bundle.[hash].js in production (the hash is added for caching purposes). For example, a file in src/entries/ with a name of home.jsx will output a file named home.bundle.js to your asset_bundles/ directory when running Webpack locally in development mode.
The theme boilerplate project includes entry points for each major route and configuration to automatically include the correct bundle for a given page from the route. If you need to change this, you can edit the webpack/scripts.ejs file.
Below are examples of entry points and their corresponding bundle names:
| Page | Entry | Output bundle name |
|---|---|---|
| homepage | home.jsx | home.bundle.js |
| Properties index page (e.g. /properties/sales) | properties-index.jsx | properties-index.bundle.js |
| Property show page (e.g. /properties/:id/sales) | properties-show.jsx | properties-show.bundle.js |
| Branches index page (e.g. /branches) | branches-index.js | branches-index.bundle.js |
If you need to include a module on multiple pages, you can simply import it into each entry point it is required. For example, you may have a module for a carousel that needs to be included on both the homepage and properties show page. You might import it into the relevant entry point like this (in this example we're imagining the module exports a default function that runs the carousel code):
The webpack configuration will automatically split certain third-party modules into a bundle named common.bundle.js. This should only include vendor libraries that are required on every page. By default, this only includes:
- react
- react-dom
- redux
- react-redux
The Webpack configuration should include this before the page-specific bundle on each page.
caution
Apart from the common bundle, you should only ever include a single bundle for each page. Including multiple bundles that reference Redux or withHomeflowState can lead to duplicate redux stores being created (and cause some nasty bugs!)
The theme boilerplate does include a global.jsx file. This should only include modules that are required on every page, and it should be imported near the top of every entry point file.
It's a good idea to regularly assess the relative size of your bundles. You can do this by running the following command:
This will run a production build of your assets and display them visually in a browser tab using a tool called Webpack Bundle Analyzer. See the example below:
You may notice some bundles being created that do not correspond to your entry points (by default these are numbered, e.g. 0.bundle.js, 1.bundle.js etc). These bundles are dynamically created by Webpack for optimization. For more information, see the section on Dynamic Imports.
Each bundle should not exceed 100kb after it's been Gzipped (you can check the 'Gzipped' tab in the Webpack Bundle Analyzer sidebar to check this), but they should preferably be much smaller than this. Always be careful when adding NPM packages that they are small and well optimised, and do not include any unnecessary, large dependencies.