Question

我关注了多篇文章，特别是这些...

这是代码拆分的示例-getRoutes()在组件的render方法中调用：

// Edit: commented out original `Loadable` abstraction to use standard `Loadable`

import React from 'react'
// import L from 'react-loadable'
import Loadable from 'react-loadable'
import { BrowserRouter, Route, Switch } from 'react-router-dom'

import { LoadingIndicator } from '../components'

// const Loadable = opts =>
//   L({
//     loading: LoadingIndicator,
//     delay: 300,
//     ...opts
//   })

const AuthenticateContainer = Loadable({
  loading: LoadingIndicator,
  loader: () => import(/* webpackChunkName: "auth" */ '../containers/Authenticate')
})

...

export default function getRoutes (isAuthed, browserHistory) {

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/auth" component={AuthenticateContainer} />
        ...
      </Switch>
    </BrowserRouter>
  )
}

..但我的代码未拆分：

$ npm run build

> my-app@0.1.0 build /path/to/my-app
> bash -ac '. .env.production; react-scripts build'

Creating an optimized production build...

File sizes after gzip:

  854.84 KB (+4 B)  build/static/js/main.1aa92927.js
  17.53 KB          build/static/css/main.36b767d9.css

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https: // goo.gl/9VhYWB
You can also analyze the project dependencies: https: // goo.gl/LeUzfb

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http: // myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  http: // bit.ly/2vY88Kr

如您所见，构建结果不是分块的，而是单个JS文件。

我在做什么错？

使用的当前版本：

react-scripts: 1.1.4
react-router-dom: 4.3.1
webpack: 3.8.1
npm: 6.1.0

Answer 1

好的，我最终解决了这个问题...

我在/src/containers/index.js有一个文件，其中包含以下行：

export { default as AuthenticateContainer } from './Authenticate/AuthenticateContainer'

这使我可以使用以下速记方式导入AuthenticateContainer：

import { AuthenticateContainer } from '../containers'

而不是稍长的

import AuthenticateContainer from '../containers/Authenticate/AuthenticateContainer'

但是，将行/src/containers/index.js保留在AuthenticateContainer中还可以防止代码分裂，因为甚至在尝试异步加载之前，main.js逻辑已被捆绑到# for the first output output = tuple(int(x[0]) for x in X) # (1, 2, 3) # for the second output output_2 = tuple((int(x[0]), ) for x in X) # ((1, ), (2, ), (3, ))中。

删除行，并按预期进行代码拆分。

使用create-react-app和react-loadable进行代码拆分不起作用

1 个答案: