Question

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

我在每条路径上使用require.ensure，如下所示：

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

我的构建的web包配置输出如下所示：

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

以下是我Use Api和route file的全部内容。

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

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

问题：我仍然在路由文件中导出我需要的容器，如下所示：从'./containerB/containerB'导出containerB 删除index.js中的导出并直接从containerB.js中执行操作。

Answer 1

确保获取您需要的参数数组模块。您需要为阵列提供要动态加载的模块名称。在您的情况下，提供'containers / Authenticate / AuthenticateContainer.js'以确保如下：

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

Answer 2

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

来解决它

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

使用：

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

希望这有帮助

Answer 3

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

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

这是get component

的代码

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')} />

Answer 4

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

    callback(null, <AuthenticateContainer />)
  }, 'auth')
}}/>

试试这个。我认为回调需要一个反应组件。

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

4 个答案: