Question

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

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

我收到错误导入关键字上出现意外令牌错误。我尝试安装babel-plugin-syntax-dynamic-import但它仍然会出现意外的令牌错误。我是React的新手，我很感激能帮助我指明正确方向的任何帮助。我的.babelrc文件有最新的和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

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

<块引用>

使用 require() 而不是 import();

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

延迟加载reactJS应用程序与laravel后端

1 个答案: