为什么 webpack 代码拆分对我不起作用？

IT技术 reactjs webpack lazy-loading react-router code-splitting
2021-05-11 10:05:22

我正在使用 require.ensure 在react-router路径上创建分割点。但是，我的构建目录app.js除了vendor.js. 我期待我使用的每个路径都有一个单独的 js 文件require.ensure。

我require.ensure在每条路径上都这样使用：

<Route path= 'auth' getComponent={(nextState, callback) => {
  require.ensure([], (require) => {
    callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
  }, 'auth')
}}/>

我用于构建的 web pack 配置输出如下所示： 

output: {
  path: PATHS.build,
  filename: '/[name].[chunkhash].js',
  chunkFilename: '/[chunkhash].js'
}

这是我的路由文件和我的webpack 配置文件的全部要点。

更新： 我发现我做错了什么。我的容器项目结构是这样的：

-app
 -containers
   -containerA.
     -containerA.js
   -containerB
     -containerB.js
   -containerC
     -containerC.js
   -index.js

问题：我仍然在导出我在路由文件中需要的容器，如下所示： export containerB from './containerB/containerB' 删除 index.js 中的导出并直接从 containerB.js 中要求做到了这一点。

3个回答

确保采用您想要的module参数数组。您需要为数组提供您希望动态加载的module名称。在您的情况下，提供 'containers/Authenticate/AuthenticateContainer.js' 以确保如下：

require.ensure(['containers/Authenticate/AuthenticateContainer.js'], (require) => {
      callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
    }, 'auth');

我在我的一个项目中遇到了同样的问题：我们使用 Systemjs 并决定切换到 Webpack，因此它破坏了我们的 System.import。我们通过替换来修复它：

System.import(modulePath)
  .then(module => {
    // Do things
  })

和 ：

new Promise((resolve, reject) => {
    resolve(require(modulePath));
}).then((module) => { 
  // Do things 
});

希望这可以帮助

我正在使用 webpack 1.13.1，这是我的配置 

output: {
        path: PATHS.build,
        filename: '[name].[hash].js',
        publicPath:"/"
    },

这是获取组件的代码

const lazyLoadSomeComponent = () => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          callback(null, require("./componentpath")["default"]);
        }, 'componentName');
      }
    }
};

然后在路线 

<Route path="somepath" {...lazyLoadSomeComponent()} />

但这是怎么回事？

  • 首先我们创建一个函数，它将为我们返回 get 组件方法。
  • 其次，我们在路由中调用该函数并执行它，以便在那里获得 get 组件方法，这将使路由易于阅读
  • 最后在 webpack 中指定公共路径，所以“/”在这里从你的服务器的根目录解析，你也可以在这里指定你的域

为了进一步增强，我们可以使用以下方法一次加载多个组件

const LazyComponents = (pageName) => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          switch(pageName){
            case 'Component1':
            callback(null, require("./components/component1")["default"]);
            break;
            case 'Component2' :
                callback(null, require( "./components/component2" )["default"]);
                    break ;

        }, "CombinedComponents");
      }
    }
};

然后在路线

<Route path="somepath" {...LazyComponents('Component1')} />
其它你可能感兴趣的问题
上一篇处理未定义声明文件的正确方法（index.d.ts） 下一篇Material-ui：图标的轮廓版