Aprende a deshabilitar fácilmente la obtención previa (prefetch) de fragmentos en tu aplicación Vue.js.

Mientras trabajaba en un proyecto que usa CodeMirror y Vue.js, comencé a trabajar con la llamada carga diferida de módulos y componentes. La idea es bastante simple, un usuario tiene un editor de código en la ventana y un modo de resaltado (HTML, CSS, JavaScript, C ++, etc.), donde el usuario debería poder cargar un modo de resaltado desde un control de selección en la aplicación. El código que hace el trabajao para cargar los módulos de forma diferida es el siguiente:

// Este podría ser cualquier otro modo de idioma como: css, java, javascript, fortran, etc.
let mode = 'html';

// Esto cargará de forma diferida el modo de idioma requerido, como css.js, java.js, javascript.js, fortran.js
const loadLanguageMode = () => import(
    /* webpackChunkName: "cmLangMode" */ 
    `codemirror/mode/${mode}/${mode}.js`
);

// El módulo deberia cargarse correctamente en la devolución de llamada.
loadLanguageMode().then(function(module){
    console.log(module);
});

Vue.js es lo suficientemente inteligente como para crear los fragmentos de los componentes necesarios, en este caso, todos los modos de resaltado admitidos de CodeMirror. Sin embargo, aunque la práctica es bastante común y la idea es aumentar el rendimiento de tu aplicación, en el generado index.html(al compilar la aplicación usando npm run build), cada fragmento está precargado en la plantilla:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="icon" href="/favicon.ico">
      <title>myapp</title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
      <!-- Cada fragmento pertenece a un modo de resaltado que puede ser necesario en la aplicación -->
      <link href="/js/chunk-0b9bac97.938bcdaa.js" rel="prefetch">
      <link href="/js/chunk-171870a1.9014b1c7.js" rel="prefetch">
      <link href="/js/chunk-18b55507.3bac28a3.js" rel="prefetch">
      <link href="/js/chunk-1ae14a32.fee94daf.js" rel="prefetch">
      <link href="/js/chunk-1f34fa2b.1c95e205.js" rel="prefetch">
      <link href="/js/chunk-1f3686ae.b0cdc22c.js" rel="prefetch">
      <link href="/js/chunk-1f49c7c2.f35086d1.js" rel="prefetch">
      <link href="/js/chunk-1f4af5e3.280d00c3.js" rel="prefetch">
      <link href="/js/chunk-208e6643.643e17ed.js" rel="prefetch">
      <link href="/js/chunk-25e44334.2e63dfae.js" rel="prefetch">
      <link href="/js/chunk-2d0a3b02.ec076722.js" rel="prefetch">
      <link href="/js/chunk-2d0a3b04.9d1e1a31.js" rel="prefetch">
      <link href="/js/chunk-2d0a3c76.49fe5ac7.js" rel="prefetch">
      <link href="/js/chunk-2d0a4b64.47da042a.js" rel="prefetch">
      <link href="/js/chunk-2d0b289a.f5d3a7f3.js" rel="prefetch">
      <link href="/js/chunk-2d0b2b06.f7ad81a7.js" rel="prefetch">
      <link href="/js/chunk-2d0b32bc.be323ef4.js" rel="prefetch">
      <link href="/js/chunk-2d0b5dc4.714b5537.js" rel="prefetch">
      <link href="/js/chunk-2d0b6e6a.db6fd84a.js" rel="prefetch">
      <link href="/js/chunk-2d0b9204.da9aa2be.js" rel="prefetch">
      <link href="/js/chunk-2d0b9a02.065cf085.js" rel="prefetch">
      <link href="/js/chunk-2d0b9d8a.ac415a8b.js" rel="prefetch">
      <link href="/js/chunk-2d0bce94.6ee52eec.js" rel="prefetch">
      <link href="/js/chunk-2d0bd3e8.f8cbac13.js" rel="prefetch">
      <link href="/js/chunk-2d0bd55b.c2a64109.js" rel="prefetch">
      <link href="/js/chunk-2d0c02f5.564d70cf.js" rel="prefetch">
      <link href="/js/chunk-2d0c0c56.2a8ae300.js" rel="prefetch">
      <link href="/js/chunk-2d0c0ff5.81de532f.js" rel="prefetch">
      <link href="/js/chunk-2d0c174b.6cc14a32.js" rel="prefetch">
      <link href="/js/chunk-2d0c4dea.70ea4688.js" rel="prefetch">
      <link href="/js/chunk-2d0c4e01.5395d591.js" rel="prefetch">
      <link href="/js/chunk-2d0c4f95.8f8de6c1.js" rel="prefetch">
      <link href="/js/chunk-2d0c5045.0339a0bf.js" rel="prefetch">
      <link href="/js/chunk-2d0c55a5.8a47c198.js" rel="prefetch">
      <link href="/js/chunk-2d0c77bc.dee4878e.js" rel="prefetch">
      <link href="/js/chunk-2d0c7b9b.95ca680f.js" rel="prefetch">
      <link href="/js/chunk-2d0c94ff.8fe6fd9a.js" rel="prefetch">
      <link href="/js/chunk-2d0c9b3b.8e09e24d.js" rel="prefetch">
      <link href="/js/chunk-2d0cb6b6.58aec826.js" rel="prefetch">
      <link href="/js/chunk-2d0cbb22.f725408d.js" rel="prefetch">
      <link href="/js/chunk-2d0cbe76.82a06050.js" rel="prefetch">
      <link href="/js/chunk-2d0cc019.cf7cae50.js" rel="prefetch">
      <link href="/js/chunk-2d0cc2cf.233db056.js" rel="prefetch">
      <link href="/js/chunk-2d0cc65f.8078fa93.js" rel="prefetch">
      <link href="/js/chunk-2d0ccfb6.e5982e39.js" rel="prefetch">
      <link href="/js/chunk-2d0cf6f4.6e816ec8.js" rel="prefetch">
      <link href="/js/chunk-2d0d4399.f8fe9732.js" rel="prefetch">
      <link href="/js/chunk-2d0d5c9b.b08871b1.js" rel="prefetch">
      <link href="/js/chunk-2d0d6703.d41c5cfc.js" rel="prefetch">
      <link href="/js/chunk-2d0d6e74.f43648c2.js" rel="prefetch">
      <link href="/js/chunk-2d0d7863.eb0caf9f.js" rel="prefetch">
      <link href="/js/chunk-2d0da307.635842fa.js" rel="prefetch">
      <link href="/js/chunk-2d0da724.313b1c69.js" rel="prefetch">
      <link href="/js/chunk-2d0da7bb.a14e850e.js" rel="prefetch">
      <link href="/js/chunk-2d0de316.34ce749f.js" rel="prefetch">
      <link href="/js/chunk-2d0de732.5ef9c175.js" rel="prefetch">
      <link href="/js/chunk-2d0e1741.3ca0962a.js" rel="prefetch">
      <link href="/js/chunk-2d0e44df.f9d0f421.js" rel="prefetch">
      <link href="/js/chunk-2d0e453d.f6d1edf9.js" rel="prefetch">
      <link href="/js/chunk-2d0e4c89.0902fad9.js" rel="prefetch">
      <link href="/js/chunk-2d0e53a6.4ca89893.js" rel="prefetch">
      <link href="/js/chunk-2d0e571a.3f5002ea.js" rel="prefetch">
      <link href="/js/chunk-2d0e9cf4.77371b80.js" rel="prefetch">
      <link href="/js/chunk-2d0f0043.14686efa.js" rel="prefetch">
      <link href="/js/chunk-2d0f00bf.bf024e0a.js" rel="prefetch">
      <link href="/js/chunk-2d0f0d73.3360ba19.js" rel="prefetch">
      <link href="/js/chunk-2d0f0ffe.ec895c05.js" rel="prefetch">
      <link href="/js/chunk-2d2073f5.ffed19d9.js" rel="prefetch">
      <link href="/js/chunk-2d207967.62b2b0cf.js" rel="prefetch">
      <link href="/js/chunk-2d207f88.c408f5c2.js" rel="prefetch">
      <link href="/js/chunk-2d2091df.fc5c945f.js" rel="prefetch">
      <link href="/js/chunk-2d20f173.e1f97f62.js" rel="prefetch">
      <link href="/js/chunk-2d20f393.c80137ee.js" rel="prefetch">
      <link href="/js/chunk-2d20f51d.cb514c59.js" rel="prefetch">
      <link href="/js/chunk-2d20fe86.cbba40ee.js" rel="prefetch">
      <link href="/js/chunk-2d21082d.fc40ac9c.js" rel="prefetch">
      <link href="/js/chunk-2d2136c8.ab0ce831.js" rel="prefetch">
      <link href="/js/chunk-2d216250.69f9cbcc.js" rel="prefetch">
      <link href="/js/chunk-2d217289.38518b7b.js" rel="prefetch">
      <link href="/js/chunk-2d217925.ba8a1256.js" rel="prefetch">
      <link href="/js/chunk-2d217aad.02d61432.js" rel="prefetch">
      <link href="/js/chunk-2d21aba8.9fd49e95.js" rel="prefetch">
      <link href="/js/chunk-2d21d6ae.158a0114.js" rel="prefetch">
      <link href="/js/chunk-2d21de22.5aa6affe.js" rel="prefetch">
      <link href="/js/chunk-2d21e1f0.f5b72d6c.js" rel="prefetch">
      <link href="/js/chunk-2d21e957.21f10287.js" rel="prefetch">
      <link href="/js/chunk-2d21e972.b80ea7ef.js" rel="prefetch">
      <link href="/js/chunk-2d2213fc.88369d2d.js" rel="prefetch">
      <link href="/js/chunk-2d221f69.3088b9a0.js" rel="prefetch">
      <link href="/js/chunk-2d222924.b235c9d2.js" rel="prefetch">
      <link href="/js/chunk-2d22292a.732ef9d1.js" rel="prefetch">
      <link href="/js/chunk-2d224ca8.73fed945.js" rel="prefetch">
      <link href="/js/chunk-2d22578a.0f8ff5af.js" rel="prefetch">
      <link href="/js/chunk-2d228d0c.a11d35fd.js" rel="prefetch">
      <link href="/js/chunk-2d229082.28980c8d.js" rel="prefetch">
      <link href="/js/chunk-2d229a09.8ed841d6.js" rel="prefetch">
      <link href="/js/chunk-2d22b97c.00c5ec34.js" rel="prefetch">
      <link href="/js/chunk-2d22c44a.7a1c6af8.js" rel="prefetch">
      <link href="/js/chunk-2d22ca66.822b599e.js" rel="prefetch">
      <link href="/js/chunk-2d22cbe8.8db1e6df.js" rel="prefetch">
      <link href="/js/chunk-2d22d9b5.137b228f.js" rel="prefetch">
      <link href="/js/chunk-2d22dd56.808275b4.js" rel="prefetch">
      <link href="/js/chunk-2d22fc96.f48cd57c.js" rel="prefetch">
      <link href="/js/chunk-2d22fd4c.788a4d70.js" rel="prefetch">
      <link href="/js/chunk-2d2302b7.47f1f7cd.js" rel="prefetch">
      <link href="/js/chunk-2d237b24.c25cceb0.js" rel="prefetch">
      <link href="/js/chunk-2d237d2e.38d0234e.js" rel="prefetch">
      <link href="/js/chunk-2d238077.857b1c5d.js" rel="prefetch">
      <link href="/js/chunk-2d238a33.e4c40b16.js" rel="prefetch">
      <link href="/js/chunk-43e60995.c60e9b02.js" rel="prefetch">
      <link href="/js/chunk-470e7c3b.4b93cdc0.js" rel="prefetch">
      <link href="/js/chunk-4bb5591c.e28e4fe1.js" rel="prefetch">
      <link href="/js/chunk-56cb95fe.1644dc04.js" rel="prefetch">
      <link href="/js/chunk-57697eda.c21a7987.js" rel="prefetch">
      <link href="/js/chunk-59503580.e73ea8f4.js" rel="prefetch">
      <link href="/js/chunk-710d49f2.82aa3ce3.js" rel="prefetch">
      <link href="/js/chunk-74930385.7f892ca8.js" rel="prefetch">
      <link href="/js/chunk-758c2cf0.e9ab8d67.js" rel="prefetch">
      <link href="/js/chunk-772ffe0d.1b7f6340.js" rel="prefetch">
      <link href="/js/chunk-7ab99897.2394d5cf.js" rel="prefetch">
      <link href="/js/chunk-a904ce78.07017c6f.js" rel="prefetch">
      <link href="/js/chunk-ce419e16.3f44099b.js" rel="prefetch">
      <link href="/js/chunk-d9993adc.b963d184.js" rel="prefetch">
      <link href="/js/chunk-edc1ac9e.1f43e1c3.js" rel="prefetch">
      <link href="/css/app.47bc2e6b.css" rel="preload" as="style">
      <link href="/css/chunk-vendors.8d0a2ffc.css" rel="preload" as="style">
      <link href="/js/app.3a5a3767.js" rel="preload" as="script">
      <link href="/js/chunk-vendors.40260f04.js" rel="preload" as="script">
      <link href="/css/chunk-vendors.8d0a2ffc.css" rel="stylesheet">
      <link href="/css/app.47bc2e6b.css" rel="stylesheet">
   </head>
   <body>
      <noscript><strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
      <div id="app"></div>
      <script src="/js/chunk-vendors.40260f04.js"></script><script src="/js/app.3a5a3767.js"></script>
   </body>
</html>

Y como elección personal para este proyecto, esto no debería suceder en absoluto. Básicamente porque sé que muchos usuarios solo necesitarán como máximo 2 o 3 idiomas de la enorme lista, y si los fragmentos se obtienen previamente, cargan automáticamente unos 400 KB adicionales que muchos usuarios no usarán. En este artículo, te explicaré cómo deshabilitar fácilmente la extension de prefetch en tu aplicación Vue.js 2.

Cómo deshabilitar prefetching en Vue.js

Para deshabilitar la captación previa globalmente en tu aplicación, todo lo que necesitas hacer es modificar la configuración de Webpack Chain. La configuración interna de WebPack se mantiene usando webpackChain en Vue.js (permite obtener control sobre la configuración interna). Elimina el complemento de captación previa con la siguiente instrucción:

// vue.config.js
module.exports = {
    chainWebpack: (config) => {
        // Remove prefetch plugin and that's it!
        config.plugins.delete('prefetch') 
    }
}

Guarda los cambios en el archivo de configuración y crea tu aplicación usando npm run build. Por supuesto, los fragmentos se generarán a medida que se necesiten. Sin embargo, en el index.html ya no se cargaran previamente:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="icon" href="/favicon.ico">
        <title>myapp</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
        <link href="/css/app.47bc2e6b.css" rel="preload" as="style">
        <link href="/css/chunk-vendors.8d0a2ffc.css" rel="preload" as="style">
        <link href="/js/app.2ffa2047.js" rel="preload" as="script">
        <link href="/js/chunk-vendors.40260f04.js" rel="preload" as="script">
        <link href="/css/chunk-vendors.8d0a2ffc.css" rel="stylesheet">
        <link href="/css/app.47bc2e6b.css" rel="stylesheet">
    </head>
    <body>
        <noscript><strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
        <div id="app"></div>
        <script src="/js/chunk-vendors.40260f04.js"></script><script src="/js/app.2ffa2047.js"></script>
    </body>
</html>

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores