Vue Router

15/27

Lectura

Hasta ahora ten铆amos 2 rutas en nuestra app, la ruta de Home y la de About.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 13

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淭ypeError: Cannot read property 鈥榬ange鈥 of null鈥 es porque no ha hecho el la actualizaci贸n de babel-eslint que se hace en la clase n煤mero 2.

鈥淎ctualiza 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!

es normal que no me est茅 cargando en network las rutas que salen en esta clase? o a que se debe esto

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