{"id":16327214,"url":"https://github.com/baumannzone/lazy-load-routes-webpack-dynamic-comments","last_synced_at":"2025-05-14T22:33:18.169Z","repository":{"id":75223212,"uuid":"256287057","full_name":"baumannzone/lazy-load-routes-webpack-dynamic-comments","owner":"baumannzone","description":"⚡️ A simple but powerful Vue.js tip: Lazy load routes \u0026 Webpack dynamic comments","archived":false,"fork":false,"pushed_at":"2021-03-30T13:18:40.000Z","size":443,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-17T06:42:44.586Z","etag":null,"topics":["lazy-load","vue-dose","vue-tip","vuejs"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baumannzone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-16T17:42:13.000Z","updated_at":"2021-03-30T13:18:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"e1cea801-6209-4172-ab4a-7c1835b09d7a","html_url":"https://github.com/baumannzone/lazy-load-routes-webpack-dynamic-comments","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/baumannzone%2Flazy-load-routes-webpack-dynamic-comments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baumannzone%2Flazy-load-routes-webpack-dynamic-comments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baumannzone%2Flazy-load-routes-webpack-dynamic-comments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baumannzone%2Flazy-load-routes-webpack-dynamic-comments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baumannzone","download_url":"https://codeload.github.com/baumannzone/lazy-load-routes-webpack-dynamic-comments/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254239891,"owners_count":22037786,"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":["lazy-load","vue-dose","vue-tip","vuejs"],"created_at":"2024-10-10T23:10:42.305Z","updated_at":"2025-05-14T22:33:18.128Z","avatar_url":"https://github.com/baumannzone.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lazy load routes \u0026 webpack dynamic comments\n\nHi! My name is [Jorge Baumann](https://twitter.com/baumannzone) and I welcome you to this new vue tip 🖖.\n\nIn this tip, I would like to share how I usually work when I have to deal with routes and lazy load.\n\nMost probably, you are used to see Vue routes like this:\n\n```javascript\nimport Vue from 'vue'\nimport VueRouter from 'vue-router'\n\nimport Home from '../views/Home.vue'\nimport About from '../views/About.vue'\nimport Login from '../views/Login.vue'\n\nVue.use(VueRouter)\n\nconst routes = [\n  { path: '/', name: 'Home', component: Home },\n  { path: '/about', name: 'About', component: About },\n  { path: '/login', name: 'Login', component: Login }\n]\n\nconst router = new VueRouter({\n  routes\n})\n\nexport default router\n```\n\n\n\nOr maybe this way, with the routes loaded asynchronously and specified chunk name:\n\n```javascript\nconst routes = [\n  {\n    path: '/',\n    name: 'Home',\n    component: () =\u003e import(/* webpackChunkName: \"Home\" */ '../views/Home.vue')\n  },\n  {\n    path: '/about',\n    name: 'About',\n    component: () =\u003e import(/* webpackChunkName: \"About\" */ '../views/About.vue')\n  },\n  {\n    path: '/login',\n    name: 'Login',\n    component: () =\u003e import(/* webpackChunkName: \"Login\" */ '../views/Login.vue')\n  }\n]\n```\n\nThis way it's really ok and it has nothing wrong. However, for most cases, I prefer to use a different system instead of using the \"normal\" approximation. \n\nAs you can see, there are some repetitive patterns. Since you are an awesome developer, you can use an `array` with the *route options* and then iterate with a `map()` function to avoid doing repetitive tasks.\n\nSomething like this:\n\n```javascript\nconst routeOptions = [\n  { path: '/', name: 'Home' },\n  { path: '/about', name: 'About' },\n  { path: '/login', name: 'Login' }\n]\n\nconst routes = routeOptions.map(route =\u003e {\n  return {\n    ...route,\n    component: () =\u003e import(`@/views/${route.name}.vue`)\n  }\n})\n\nconst router = new VueRouter({\n  routes\n})\n```\n\n🤩 Looks nice, isn't it?\n\nWe have reduced the use of the `component` key by using the route `name` as param in the `import` function. \n\nBut.. what happens if you want set the *chunk name*? \nI'm not a scientist, but as far as my knowledge reaches, you can't have dynamic comments in javascript. So, we are sacrificing comments (`webpackChunkName`) in favor of having to write less code. It's up to you.\n\nJoke. **Webpack to the rescue!** As of webpack `2.6.0` , the placeholders `[index]` and `[request]` are supported, meaning you can set the name of the generated chunk thus:\n\n```javascript\n// ...\n\nconst routeOptions = [\n  { path: '/', name: 'Home' },\n  { path: '/about', name: 'About' },\n  { path: '/login', name: 'Login' }\n]\n\nconst routes = routeOptions.map(route =\u003e {\n  return {\n    ...route,\n    component: () =\u003e import(/* webpackChunkName: \"[request]\" */ `../views/${route.name}.vue`)\n  }\n})\n\nconst router = new VueRouter({\n  routes\n})\n```\n\n👌 Very nice! Now you have all the power, dynamically loaded routes with named chunks. You can check it out by running `npm run build` in your terminal:\n\n![build](build.png)\n\nAs you see, it's extremely easy implement this in your vue.js applications. Now it's your turn. Start to improve your `router.js` file by using this awesome tip.\n\n\n\n---\n\n\n\nThat's all. Thanks for reading. Share it if you liked it. And Alex, thank you for letting me write my first Vue tip. 🤘\n\nMy name is [Jorge Baumann](https://instagram.com/baumannzone) and I'm a fullstack developer, currently living in Madrid. I'm into javascript, HTML, CSS, node.js, vue.js, firebase, Web APIs, etc. \nI have a beautiful dog called Rambo, who honors my youtube (newly released) channel.\n\n[![rambitoJS](rambitoJS.png)](https://www.youtube.com/channel/UCTTj5ztXnGeDRPFVsBp7VMA)\n\nI usually tweet web-dev related stuffs and I'm continuously creating software on github. I write blog posts on Medium (*spanish*) and Dev.to (*english*). \n\n- Twitter: [@baumannzone](https://twitter.com/baumannzone)\n- Instagram: [baumannzone](https://instagram.com/baumannzone)\n- Github: [baumannzone](https://github.com/baumannzone)\n- Dev.to: [baumannzone](https://dev.to/baumannzone)\n- Youtube: [Rambito JS](https://www.youtube.com/c/RambitoJS)\n- Medium: https://baumannzone.medium.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaumannzone%2Flazy-load-routes-webpack-dynamic-comments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaumannzone%2Flazy-load-routes-webpack-dynamic-comments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaumannzone%2Flazy-load-routes-webpack-dynamic-comments/lists"}