While I was working on a project that uses CodeMirror and Vue.js, I started to work with the so-called lazy loading of modules and components. The idea is quite simple, an user has a code editor in the Window and a highlighting mode (HTML, CSS, JavaScript, C++ etc.), where the user should be able to load a highlighting mode from a simple select in the application. The code that does the trick to lazy load the modules is the following one:
// This could be any other language mode like: css, java, javascript, fortran etc.
let mode = 'html';
// This will lazy-load the required language mode, like css.js, java.js, javascript.js, fortran.js
const loadLanguageMode = () => import(
/* webpackChunkName: "cmLangMode" */
`codemirror/mode/${mode}/${mode}.js`
);
// The module should be loaded succesfully in the callback
loadLanguageMode().then(function(module){
console.log(module);
});Vue.js is smart enough to create the chunks of the required components, in this case, all of the supported highlighting modes of CodeMirror. However, although the practice is quite common and the idea is to boost the performance of your application, in the generated index.html (when building the app using npm run build), every chunk is prefetched in the template:
<!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/font@latest/css/materialdesignicons.min.css">
<!-- Every chunk belongs to a Highlighting Mode that may be required in the application -->
<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>And as personal choice for this project, this shouldn't happen at all. Basically because I know that many users will only need at most 2 or 3 languages from the huge list, and if the chunks are prefetched, they automatically load about extra 400KB that many users won't use. In this article, I will explain you how to easily disable prefetching in your Vue.js 2 application.
How to disable prefetching in Vue.js
To disable prefetching globally in your application, all you need to do is to modify the Webpack Chain configuration. The internal webpack config is maintained using webpack-chain in Vue.js (it allows to gain control over the internal config). Delete the prefetch plugin with the following instruction:
// vue.config.js
module.exports = {
chainWebpack: (config) => {
// Remove prefetch plugin and that's it!
config.plugins.delete('prefetch')
}
}Save the changes to the configuration file and build your application using npm run build. Of course, the chunks will be generated as they are needed! However, in the index.html they won't be prefetched anymore:
<!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/font@latest/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>Happy coding ❤️!
