Laravel / Vue - App.js difference between import and require

Question

Are there any significant difference between these two syntax?

Vue.component('base-table', () => import('./components/BaseTable.vue'))
Vue.component('base-table', require('./components/BaseTable.vue').default);

Is one or the other affects the loading performance of an application?

Answer 1

From the Webpack docs:

require

Synchronously retrieve the exports from another module. The compiler will ensure that the dependency is available in the output bundle

import()

Dynamically load modules. Calls to import() are treated as split points, meaning the requested module and its children are split out into a separate chunk.

Simply 1st puts your BaseTable.vue component into separate JS bundle (file) which will be requested by a browser at the moment component is rendered 1st time. Good for components/parts of app which are not needed immediately (per-route code splitting) or only for some users (admins for example). Your base bundle size is smaller and thus parsed faster by the browser -> better initial loading performance...

Declaimer: Commenting from Vue/Webpack POV. I know nothing about Laravel except it's PHP thing...