CODEWITHSUNDEEP
typescript
Kirubachari
Kirubachari

Reputation: 688

Incorporate Typescript to existing project

I am a newbie to Typescript and exploring possibility of incorporating Typescript to my existing project.

In our MVC project, we have one file which has definition of all model objects and it will be downloaded to client once user lands on the page. If user clicks on button then we download View/UI related files for that particular feature alone . Basically, we download view files on demand to improve responsiveness.

I had converted all my model objects to typescript objects and I have one output file similar to the existing one. Now, I need to generate view files which should contain only view related logic. If I refer to model objects through an import statement then the output js file contains the definition of model objects too which increases file size.

Is this possible to refer model objects without importing them to view files since model file downloaded to client before view files ?

Upvotes: 0

Views: 43

Answers (1)

Alex Wayne
Alex Wayne

Reputation: 187024

Most bundlers split files on dynamic imports. A dynamic import is when you call import like a function.

import('./myViewFile')

When the bundler sees a dynamic import, it tries to put related code into a different file when compiled so that it may requested independently as needed.

But how you use those dynamic imports will depend on your frontend framework.

In React, for instance, that looks like this:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

(See React docs on code splitting here: https://reactjs.org/docs/code-splitting.html)

How you do this in your code will depend on a lot of factors, but this general strategy is the one most frontend code will use. And this answer should at least give you the names of things to search for.

Upvotes: 1

Related Questions