Vue Router

De esta manera obtendrán el webpackChunkName de manera dinámica

// Rutas
const routes = routerOptions.map(r => {
  return {
    ...r,
    // Lazy load
    component: () => import(/* webpackChunkName: "[request]" */ `@/views/${r.name}/Index.vue`)
  }
})

Y al correr el comando yarn build quedará así:

File                                     Size             Gzipped

  dist/js/chunk-vendors.ad6a5d93.js        626.47 KiB       173.32 KiB
  dist/js/app.32173536.js                  9.89 KiB         3.93 KiB
  dist/js/Home-Index-vue.3792e385.js       1.04 KiB         0.56 KiB
  dist/js/Profile-Index-vue.9777fa54.js    0.50 KiB         0.33 KiB
  dist/js/Error-Index-vue.aae4ffcf.js      0.49 KiB         0.33 KiB
  dist/js/Hero-Index-vue.87ee5a10.js       0.48 KiB         0.33 KiB
  dist/js/About-Index-vue.bfa332ee.js      0.46 KiB         0.32 KiB
  dist/css/chunk-vendors.73152c73.css      237.67 KiB       31.77 KiB
  dist/css/app.e8df6455.css                3.95 KiB         0.99 KiB

Si tienes la versión actual de babel

"babel-eslint": "^10.1.0" 

Y te sale este error

Cannot read property 'range' of null

configura los rules en el package.json

"rules": {
      "template-curly-spacing": "off",
      "indent": [
        "error",
        2,
        {
          "ignoredNodes": [
            "TemplateLiteral"
          ]
        }
      ]
    },

de lo contrario tienes que cambiar a la versión que recomendaron al inicio.

Si alguno le aparece un error “TypeError: Cannot read property ‘range’ of null” es porque no ha hecho el la actualización de babel-eslint que se hace en la clase número 2.

“Actualiza la versión que tengas de babel-eslint a la 7.2.3. En mi caso, he pasado de la versión ^10.0.3 a la 7.2.3”

Es decir en el package json cambias la versión de babel y luego en la consola ejecutas el comando npm install

  "devDependencies": {
    /* muchas dependencias ....*/	
    "babel-eslint": "7.2.3", /* antes tenia la versión ^10.0.3*/
    /* y más dependencias ....*/	
  },

Muy pro esto de los imports dinámicos!!

Wow Wow man, este apartado me gustó, excelente, aprendí nuevas cosas… “Eres el puto amo, de las calles y garitos. Aquí todo es infinito cada palpito es un grito. Cada hazaña un hito cada creador un mito.”

Aqui les dejo el import con el chuck name de todos los componentes

const routes = [
  {
    path: "/",
    name: "Home",
    component: () =>
      import(/* webpackChunkName: "Home" */ `@/views/Home/index.vue`),
  },
  {
    path: "/region/:region/profile/:battleTag",
    name: "Profile",
    component: () =>
      import(/* webpackChunkName: "Profile" */ `@/views/Profile/index.vue`),
  },
  {
    path: "/region/:region/profile/:battleTag/hero/:heroId",
    name: "Hero",
    component: () =>
      import(/* webpackChunkName: "Hero" */ `@/views/Hero/index.vue`),
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "About" */ `@/views/About/index.vue`),
  },
  {
    path: "/error",
    name: "Error",
    component: () =>
      import(/* webpackChunkName: "Error" */ `@/views/Error/index.vue`),
  },
  {
    path: "*",
    redirect: {
      name: "Home",
      component: () =>
        import(/* webpackChunkName: "Home" */ `@/views/Home/index.vue`),
    },
  },
];

En este caso cambie el nombre de routeroptions routes para dejar un solo array con toda la informacion

El mes pasado escribí un artículo en CSS tricks, donde hablo de esto también: https://css-tricks.com/lazy-load-routes-in-vue-with-webpack-dynamic-comments/

🤯🤯 que buena clase, demasiado lo de los chunks y los import gracias🤯🤯

Que buen tema esto del lazy load y los chunks, aprendi varias cosas como el nombrar los chunks, siempre que veia ese comentario en los componentes pense que solo era para documentacion del codigo pero no sabia pera lo que realmente se utilizaba.

🤯🤯🤯🤯🤯
wow
Siempre me pregunté cómo optimizar el build. Gracias!!

Increíble, esta forma de cargar los componentes de las vistas me gustó porque practicamente te obliga a seguir el estandar de poner en una carpeta tu componente con nombre Index y que el nombre del componente debe ser el mismo que las rutas. Una desventaja obviamente es que no podemos ponerle nombre a los chunks de esta forma (¿O si?..)

Como sea, me gustó esta clase:D!

He encontrado una forma de añadir el nombre de los chunks dinámicamente. Si el import lo hacemo de la siguiente manera:
component: () => import(/* webpackChunkName: “[request]” */ @/views/${r.name}/IndexView.vue)
Obtenemos el siguiente resultado:
dist/js/chunk-vendors.590c8409.js 445.76 KiB 134.02 KiB
dist/js/app.6388c60b.js 10.07 KiB 4.23 KiB
dist/js/Home-IndexView-vue.46de4288.js 2.61 KiB 1.19 KiB
dist/js/About-IndexView-vue.66a0c0a8.js 0.43 KiB 0.32 KiB
dist/js/Error-IndexView-vue.11a695aa.js 0.41 KiB 0.30 KiB
dist/js/Hero-IndexView-vue.77135ef2.js 0.40 KiB 0.30 KiB
dist/css/chunk-vendors.882e7f9f.css 199.53 KiB 29.32 KiB
dist/css/app.412d7999.css 0.21 KiB 0.18 KiB