Vue.js 2 Web Development Projects

Code-splitting with dynamic imports

When we create the i18n object, we want to load only the translations of the selected locale via the locale argument. To do that, we will make a dynamic import of the file with the import function. It takes the path as the argument and returns a Promise, which will eventually resolve to the corresponding JavaScript module once it is loaded from the server.

In webpack, this dynamic import feature is sometimes referred as 'code splitting', because webpack will move the asynchronous module to another compiled JavaScript file called a chunk.

Here is an example of an asynchronous module loaded with a dynamic import:

async function loadAsyncModule () {  await module = await import('./path/to/module') console.log('default ...