JavaScript React Meteor的動態導入

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

我剛剛寫了一篇有關如何執行此操作的文章，更重要的是，有關何時何地執行此操作的文章。

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

TL; DR： import('./my_component')返回一個承諾，該承諾在客戶端擁有時解析。

之前 ：客戶端捆綁包的正常導入部分

import PickDates from './PickDates';

after ：動態導入不再是客戶端捆綁包的一部分

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

Answer 2

可以使用require進行此處提到的Meteor動態導入，但是請注意，不建議這樣做，因為這可能會導致應用程序中的錯誤。

我已經做了幾次這種導入，但是我的代碼仍然可以正常工作。 但是我不建議您這樣做，僅當您確實需要它時，才值得嘗試