Cómo usar la división de código de Webpack con Vue.js

foto de pabloheimplatz

He estado trabajando con Vue.js durante los últimos 8 meses y mi equipo y yo hemos utilizado diferentes técnicas de optimización del rendimiento para mejorar la experiencia del usuario. ¡Es hora de compartir!

Nota: puede leer el artículo sin hacer realmente el tutorial. Puedes ver el código aquí.

Utilizaremos un proyecto simple generado con vue-cli con la plantilla de paquete web con solo dos rutas (Hello y Goodbye):

git clone https://github.com/PierreCavalet/vuejs-code-splitting.git
npm install

Vamos a hablar sobre las herramientas de compilación, por lo que necesitará un servidor http para servir archivos estáticos. Usaré http-server pero puedes usar uno diferente si lo prefieres.

npm install -g http-server

Cuando está creando una aplicación grande, el paquete Javascript puede ser bastante grande. Esto afectará directamente la experiencia del usuario porque el tiempo de carga aumentará en consecuencia.

Primero, debemos entender cómo se crea una aplicación para la producción.

npm run build

Este comando produce los archivos que se sirven en un servidor HTTP. Aquí está la estructura:

.
├── index.HASH.html
├── estático /
│ └── css /
│ │ └── app.HASH.css
│ │ └── app.HASH.css.map
│ └── js /
│ │ └── app.HASH.js
│ │ └── app.HASH.js.map
│ │ └── manifest.HASH.js
│ │ └── manifest.HASH.js.map
│ │ └── vendor.HASH.js
│ │ └── vendor.HASH.js.map

El paquete app.HASH.js contiene el código de la aplicación (sin las bibliotecas externas, que están en vendor.HASH.js).

Utilizaremos el servidor http para servir estos archivos.

http-server dist /

Por defecto, el servidor http se ejecuta en el puerto 8080. Debería poder ver su aplicación creada para producción aquí.

Estoy usando Chrome pero puedes hacer lo siguiente con casi cualquier navegador. Desde las herramientas de desarrollo de Chrome, puede ver el tráfico de red:

Index.html contiene etiquetas de script y enlace que le indican al navegador que descargue los archivos js y css anteriores.

La división de código le permite crear fragmentos que no están incluidos en la aplicación. HASH.js. En cambio, estos fragmentos se cargan de forma asíncrona cuando se requieren. Esta técnica es útil cuando su aplicación se vuelve demasiado grande para ser servida como un solo archivo, o cuando tiene mucho contenido que probablemente no será utilizado por sus usuarios.

Volvamos a nuestro ejemplo. Supongamos que nuestro componente Adiós es huuuuuge y necesitamos dividirlo.

Webpack proporciona una función de división de código que le permite crear fragmentos que luego se pueden cargar a pedido. Usaremos:

  • la característica dinámica de Webpack de importación para dividir el código en su propio fragmento
  • la función de componentes asíncronos para cargar el componente de forma asincrónica

Cambie su src / router / index.js con este nuevo contenido.

Y eso es. En lugar de utilizar una importación estándar, definimos Adiós con una función de flecha que devuelve una promesa (importación devuelve una promesa). Ahora veamos la diferencia con la aplicación creada para la producción.

Primero, elimine la compilación anterior:

rm -rf dist / *

Luego reconstruya la aplicación:

npm run build

Tenga en cuenta que hay un nuevo archivo Javascript en la salida:

.
├── index.HASH.html
├── estático /
│ └── css
│ │ └── app.HASH.css
│ │ └── app.HASH.css.map
│ └── js
│ │ └── app.HASH.js
│ │ └── app.HASH.js.map
│ │ └── 0.HASH.js
│ │ └── 0.HASH.js.map
│ │ └── manifest.HASH.js
│ │ └── manifest.HASH.js.map
│ │ └── vendor.HASH.js
│ │ └── vendor.HASH.js.map

0.HASH.js es el fragmento que contiene el componente adiós.

Cargue la aplicación y compare la red.

Cuando carga la aplicación, puede ver esta red:

Primero podemos notar que la aplicación es un poco más ligera (-0.5 kb) porque no contiene el componente Adiós. Ahora, si hacemos clic en el enlace de despedida, aquí está la red:

El fragmento se carga de forma asincrónica. Así es como funciona la división de código.

Ahora, a medida que su aplicación crezca, tendrá más y más componentes asíncronos. Imagine que tiene un proceso que utiliza 2 rutas, la ruta / foo y la ruta / bar. Puede agrupar los 2 fragmentos en el mismo fragmento utilizando un fragmento con nombre. Intentemos esto.

Primero necesitamos configurar su proyecto con más componentes asíncronos:

escondite
git checkout multiple-async-components

Nota: Si en realidad no está haciendo el tutorial, puede verificar la fuente en github.

Elimine la compilación anterior y reconstruya la aplicación:

rm -rf dist / *
npm run build

Como puede ver, hay 3 fragmentos (0, 1, 2).

Ahora usaremos un parámetro especial para webpack: webpackChunkName.

Cambie su src / router / index.js con este nuevo contenido.

Ahora, si reconstruye su aplicación, puede ver que solo hay dos fragmentos:

  • Uno con el componente Adiós
  • Uno con el componente Foo y Bar

Si desea más información sobre el tema, puede consultar la documentación oficial.