Динамические Imports для JavaScript Реагировать Метеор

Question

У меня много кода, который выглядит следующим образом:

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 

Очевидно, что когда я реорганизовать я хочу, чтобы удалить некоторые из этого котла пластины, но я не знаю, как Я могу сделать это, потому что не вижу, как я могу динамически импортировать нужные мне файлы. Возможно ли это в JS React Meteor?

Answer 1

Можно сделать динамический импорт с помощью Meteor, как указано здесь using require, но заметил, что это не рекомендуется делать, потому что это может вызвать ошибки в вашем приложении.

Я сделал этот вид импорта несколько раз, и мой код все еще работает нормально. Но я не рекомендую вам это делать, только если вам это действительно нужно, это может стоить попробовать

Answer 2

Я только что написал статью о том, как это сделать и что еще более важно, когда и зачем это делать.

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

TL; DR: import('./my_component') возвращает обещание, которое решает, когда клиент имеет его.

Перед: нормальный импорт часть пучка клиентскую

import PickDates from './PickDates'; 

после: динамический импорт больше не является частью пучка клиентскую

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, 
});