동적 수입 나는 다음과 같은 코드를 많이 가지고 유성

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를 사용하여 동적 가져 오기를 수행 할 수 있지만 앱에 버그가 발생할 수 있으므로 권장하지 않습니다.

나는 이런 종류의 가져 오기를 몇 번했지만 코드는 여전히 잘 작동합니다. 그러나 나는 당신이 정말로 그것을 필요로하는 경우에만 그것을 할 것을 권장합니다. 시도해 볼만한 가치가 있습니다.

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