reactjs - 为什么 webpack 代码分割对我不起作用？

Question

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

我在每个路径上使用了 require.ensure ，如下所示:

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

我的构建的 webpack 配置输出如下所示:

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

这是我的 route file 的要点和我的webpack config 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');