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?

Michal Levý · Accepted Answer · 2020-01-02 08:56:00Z

2

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...

answered Jan 2, 2020 at 8:56

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related