javascript - 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') 返回一个 Promise，当客户端拥有它时，该 Promise 就会解析。

之前:客户端 bundle 的正常导入部分

import PickDates from './PickDates';

之后:动态导入不再是客户端 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,
});