Does the component import order interfere with performance?

Asked

Viewed 113 times

1

Today I wondered about a question in the component import order, whether it be this in Angular, React, or Vue.

Would the component import order refer to order of use, improve performance or nothing to do? Where everything is already built and js will only be in charge of displaying the content.

  • Possibly in some cases.

2 answers

2

In React it makes no difference the import order. There is an extension in Vscode called "Import Cost" that shows the weight(size) that has its import, so you can analyze whether you should import everything of that component or only what you will use.

1

When you just use require, the webpack compiles all its modules into a single javascript file, and according to the size of the modules (+ dependencies) this file will be large. So if it is a web application and the user is on a slow internet logically the application should take a while to start for the first time.

To solve this the webpack has the Code Spitting feature (https://webpack.js.org/guides/code-splitting/) where when you use the function import() it splits your modules into small files that are loaded only when needed. This way your build gets smaller, so your application starts faster.

In the case of Vue.js there are Dynamic and Asynchronous Components (https://br.vuejs.org/v2/guide/components-dynamic-async.html).

Browser other questions tagged

You are not signed in. Login or sign up in order to post.