reactjs - 使用 Laravel 后端延迟加载 reactJS 应用程序

Question

我在后端使用 laravel，在前端使用 ReactJS。我尝试在需要时使用 asyncComponent 方法加载组件，以减少加载时间。问题是我在下面的动态导入中遇到错误:

const asyncCheckout = asyncComponent(() => {
  return import('./containers/Checkout/Checkout');
});

我在 import 关键字上收到错误 Unexpected token error。我尝试安装 babel-plugin-syntax-dynamic-import但它仍然会出现意外的 token 错误。我是 React 的新手，如果能帮我指明正确的方向，我将不胜感激。我的 .babelrc 文件有 latest 和 react 和 env 作为预设。谢谢。

我在项目根目录中的 .babelrc 文件:

{
  "presets": [
    "env"
  ],
  "plugins": ["transform-class-properties"]
}

Web 包配置，来自 laravel mix:

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */

require('../src/index');
require(Mix.paths.mix());

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

let WebpackConfig = require('../src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

还有我的 package.json 文件:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.17",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-env": "^1.6.1",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-react": "^6.23.0",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "react": "^16.2.0",
        "react-dom": "^16.2.0"
    },
    "dependencies": {
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "react-bootstrap": "^0.31.5",
        "react-redux": "^5.0.6",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-social-login": "^3.4.2",
        "redux": "^3.7.2",
        "redux-thunk": "^2.2.0",
        "watch": "^1.0.2"
    }
}

Answer 1

我发现进行动态导入的最佳方法是:)

use require() instead of import();

const HomeLazy = React.lazy(() => {
    return new Promise((resolve) => {
        setTimeout(() => resolve(require("./pages/home")), 300);
    });
});