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

之前：正常导入部分客户端捆绑

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

JavaScript React Meteor的动态导入

2 个答案: