{"id":16325404,"url":"https://github.com/jeantimex/react-webpack-code-splitting","last_synced_at":"2026-05-08T04:02:10.153Z","repository":{"id":148195010,"uuid":"96562385","full_name":"jeantimex/react-webpack-code-splitting","owner":"jeantimex","description":":trident: A demo of how to split the code for a React Webpack application.","archived":false,"fork":false,"pushed_at":"2017-08-30T05:41:02.000Z","size":263,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-19T12:53:21.647Z","etag":null,"topics":["code-splitting","react","react-router-v3","webpack-dev-server","webpack2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeantimex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-07-07T17:48:02.000Z","updated_at":"2021-05-07T19:29:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"dab4972e-a487-4c4c-ab08-bb8c831aff30","html_url":"https://github.com/jeantimex/react-webpack-code-splitting","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"bcf909306bbd60bd268c0d57fbeb7a5e76108084"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jeantimex/react-webpack-code-splitting","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Freact-webpack-code-splitting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Freact-webpack-code-splitting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Freact-webpack-code-splitting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Freact-webpack-code-splitting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeantimex","download_url":"https://codeload.github.com/jeantimex/react-webpack-code-splitting/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeantimex%2Freact-webpack-code-splitting/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272024538,"owners_count":24860528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-25T02:00:12.092Z","response_time":1107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-splitting","react","react-router-v3","webpack-dev-server","webpack2"],"created_at":"2024-10-10T23:04:57.854Z","updated_at":"2026-05-08T04:02:05.098Z","avatar_url":"https://github.com/jeantimex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to Code Split with React Router and Webpack\n\n![rocket](docs/images/cover.png)\u003cbr /\u003e\n\n## About\n\nWebpack is an awesome tool for bundling front end assets including JavaScript, CSS etc. The output bundle size can be big and that will cause loading slowness and poor user experiences, we should only load the assets on demand for each route.\n\nLuckily React Router allows us to load the components asynchronously and Webpack can bundle the components into chunks. For example, there are three routes, and Each route is associate with a React component:\n\n- /home (Home.js)\n- /about (About.js)\n- /users (Users.js)\n\nYou don't want to bundle them all into one giant App.js. In React Router, we can use System.import (or requre.ensure) to load each component for each route, like so:\n\n```javascript\ngetComponent(location, cb) {\n  require.ensure([], (require) =\u003e {\n    cb(null, require('./components/Home').default)\n  }, 'Home'); // Output Home.chunk.js\n}\n```\n\nor \n\n```javascript\ngetComponent(location, cb) {\n  System.import('./components/Home' /* webpackChunkName:'Home' */)\n    .then(loadRoute(cb, false))\n    .catch(errorLoading);\n},\n```\n\nThen all we need to do in the Webpack config is to specify the chunk filename:\n\n```\noutput: {\n  ...\n  chunkFilename: '[name].[chunkhash].chunk.js',\n  ...\n},\n```\n\nNow when you navigate to each route, only the necessary component will be loaded.\n\n## Quick start\n\n1. Clone this repo using `git clone https://github.com/jeantimex/react-webpack-code-splitting.git`\n2. Run `yarn` or `npm install` to install the dependencies\n3. Run `yarn start` and see the example app at `http://localhost:3000`\n\n## License\n\nThis project is licensed under the MIT license, Copyright (c) 2017 Yong Su. For more information see `LICENSE.md`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeantimex%2Freact-webpack-code-splitting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeantimex%2Freact-webpack-code-splitting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeantimex%2Freact-webpack-code-splitting/lists"}