CODEWITHSUNDEEP
javascriptreactjsmeteor
user1170304
user1170304

Reputation: 325

Dynamic Imports for JavaScript React Meteor

I've got a lot of code that looks like the following:

import {Meteor} from 'meteor/meteor'; import {createContainer} from 'meteor/react-meteor-data';

import FoodItemList from '../components/FoodItemList.jsx';

import {FoodItems} from '../../api/FoodItems/FoodItems.js';

const FoodItemListContainer = createContainer(({imageIDFilter}) => {
    const user = Meteor.user()
        ? Meteor.user().username
        : '';
    const query = {
        username: {
            $not: {
                $eq: user
            }
        }
    };
    const foodItems = Meteor.subscribe('foodItems');
    const foodItemList = FoodItems.find(query).fetch()
    const loading = !foodItems.ready();

    return {loading, foodItemList, imageIDFilter, user};

}, FoodItemList);

export default FoodItemListContainer

Obviously when I refactor I want to remove some of this boiler plate but I'm not sure how I can do this because I don't see how I can dynamically import the files I need. Is this possible in JS React Meteor?

Upvotes: 0

Views: 292

Answers (2)

zeroasterisk
zeroasterisk

Reputation: 2209

I just wrote an article about how to do this and, more importantly, when and why to do this.

https://code.zeroasterisk.com/2017/05/meteor-1-5-bundle-optimization/

TL;DR: import('./my_component') returns a promise, which resolves when the client has it.

before: normal import part of clientside bundle

import PickDates from './PickDates';

after: dynamic import no longer a part of clientside bundle

import Loader from 'react-loader';

// generic loading component to show while transfering section of code
const LoadingComponent = () => <span className="text-muted"><i className="fa fa-refresh" /></span>;
// new version of the component, now: loading --> rendered
const PickDates = Loader({
  // this does the dynamic import, and returns a promise
  loader: () => import('./PickDates'),
  // this is our generic loading display (optional)
  LoadingComponent,
  // this is a delay before we decide to show our LoadingComponent (optional)
  delay: 200,
});

Upvotes: 1

kkkkkkk
kkkkkkk

Reputation: 7748

It is possible to do dynamic imports with Meteor as mentioned here using require, but noticed that it is not recommended to do so because it may cause bugs in your app.

I have done this kind of import a few times and my code still work fine. But I do not recommend you to do it, only if you really need it, it may worth trying

Upvotes: 0

Related Questions