问题描述
我有一个使用React构建前端的Symfony应用程序。 从我们的最新版本开始,react应用的构建大小变得太大,并且实际上在尝试编译的服务器上的内存不足。 我一直在尝试实现代码拆分,并使初始页面加载更加有效。 我遇到了路线问题。
我的路由器的定义与此类似。
import React from 'react'; import Loadable from 'react-loadable'; import DelayedLoading from 'components/DelayedLoading'; export default [ component: Loadable({loader: () => import('containers/Page'), loading: DelayedLoading}), routes: [ { path: '/', component: Loadable({loader: () => import('containers/MainPage'), loading: DelayedLoading}), }, { path: '/foo/bar', component: Loadable({loader: () => import('containers/FooBarPage'), loading: DelayedLoading}), }, ] ];
在我的webpack配置中,我定义了
module.exports = {
output: {
path: path.resolve(__dirname, 'web'),
filename: 'react/js/[name].js',
},
}
每当路径的深度为两个或更多时,这些块就会尝试从错误的目录加载。
例如,上面的foo/bar
路由将尝试在foo/react/js/___.js
加载块,但从/
路由加载的块或仅一个深度的任何路由都将从react/js/___.js
正确加载react/js/___.js
。
如何获取所有要从react/js
加载的块?
1楼
我通过使用来避免这些问题
2楼
解决方案是在问题的讨论中达成的,但如果有人遇到此问题并正在寻找可接受的答案,而不是阅读评论,则将最终答案放在此处。 非常感谢@Adam将我推向正确的方向。
我必须更新output
配置,如下所示:
module.exports = {
output: {
path: path.resolve(__dirname, 'web/react/js'),
publicPath: '/react/js',
filename: '[name].js',
}
}
通过这种配置,代码将输出到web/react/js/
目录,但是来自Web的代码将从/react/js/
。
Webpack不会根据尝试访问它的页面的路由来自动为服务器提供JS代码的路径。