Dynamic importing Talk

react
1

Hello everyone, I had questions about dynamic imports.
Of course, I ask everyone to speak by example.

2

My first question is that in general, dynamic imports can be used in some places.
I mean, where did you use it?
For example, say in the import of methods and components and …
Due to the fact that the project is React and has components, methods, collections and packages, it also uses React router.

3

I just started a new project with cordova mobile apps and web interface for data adminstrations. So I want completely different apps on web and mobile but we got only one entry point for all clients. I use dynamic imports just for the code splitting but in this case I don’t really care about the dynamic part of it.

Atm my /client/main.tsx looks like this:

import { Meteor } from 'meteor/meteor';
import '/imports/api/api';
import React, { Suspense, lazy } from 'react';
import { render } from 'react-dom';
import { configureCordovaPushClient } from '/imports/push-configuration/configureCordovaPushClient';


Meteor.startup(async () => {
  
  let App: React.LazyExoticComponent<() => JSX.Element>;
  
  if (Meteor.isCordova) {
    configureCordovaPushClient();
    App = await lazy(() => import('/imports/ui/MobileApp'));
  } else {
    App = lazy(() => import('/imports/ui/WebApp'));
  }

  render(
    <Suspense fallback={ <div>Loading...</div> }>
      <App />}
    </Suspense>
    , document.getElementById('react-target'));
});
4

@filipenevola @storyteller and others
I think Meteor should formally give many examples for dynamic imports.
To make this issue clear.
For example, a small project should be created with react, react router, etc.
And bring anything that can be entered dynamically.

I think this repository should be created in this tank :

https://github.com/meteor/examples

Examples should be given in the following:

  • methods
  • components
  • routes
  • Nested components
  • Packages
  • Collections
  • In general anything is possible