{"id":19198820,"url":"https://github.com/ditdot-dev/vue-code-splitting","last_synced_at":"2026-04-16T17:07:22.650Z","repository":{"id":39696892,"uuid":"322636464","full_name":"ditdot-dev/vue-code-splitting","owner":"ditdot-dev","description":"Example of code splitting in Vue app with webpack and dynamic imports","archived":false,"fork":false,"pushed_at":"2021-04-09T08:35:29.000Z","size":313,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-04T11:18:53.067Z","etag":null,"topics":["code-splitting","dynamic-import","example","performance-optimization","vue","webpack"],"latest_commit_sha":null,"homepage":"https://www.ditdot.hr/en/code-splitting-in-vue-js","language":"Vue","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/ditdot-dev.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}},"created_at":"2020-12-18T15:43:46.000Z","updated_at":"2023-03-24T09:05:10.000Z","dependencies_parsed_at":"2022-09-20T08:21:53.829Z","dependency_job_id":null,"html_url":"https://github.com/ditdot-dev/vue-code-splitting","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fvue-code-splitting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fvue-code-splitting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fvue-code-splitting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fvue-code-splitting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ditdot-dev","download_url":"https://codeload.github.com/ditdot-dev/vue-code-splitting/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240271540,"owners_count":19774859,"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","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","dynamic-import","example","performance-optimization","vue","webpack"],"created_at":"2024-11-09T12:24:11.895Z","updated_at":"2026-04-16T17:07:22.619Z","avatar_url":"https://github.com/ditdot-dev.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Splitting in Vue \n\u003e Code splitting example app that demonstrates creating multiple code bundles with dynamic import statements. \n\nExample of code splitting in Vue based on computed property and dynamic components. The initial load contains the initial view and critical assets, while other modules are loaded on the button press. \n\n## Features \n\n- when the data changes, the computed property will re-evaluate\n- dynamic component switches between the imported components after the computed property change\n- default Vue CLI prefetch function is disabled in vue.config.js - components are loaded on demand, as the user navigates the application\n\n## Article\n\n- [Code Splitting in Vue](https://www.ditdot.hr/en/code-splitting-in-vue-js)\n\n\n## Clone\n\nClone this repo to your local machine \n\n```shell\n$ git clone https://github.com/ditdot-dev/vue-code-splitting.git\n```\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n## License\n\n[MIT](https://github.com/ditdot-dev/vue-code-splitting-example/blob/main/LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fditdot-dev%2Fvue-code-splitting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fditdot-dev%2Fvue-code-splitting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fditdot-dev%2Fvue-code-splitting/lists"}