如何通过代码分割多次防止加载供应商
我现在正在玩create-react-app和代码分割。 在我开始导入供应商库之前，它工作得很好，这些库将包含在每个块中。
这是我目前的做法：
App.js
const HomePage = Loadable({
loader: () => import('./Home.js'),
LoadingComponent: Loading
});
const AboutPage = Loadable({
loader: () => import('./About.js'),
LoadingComponent: Loading
});
class App extends PureComponent {
render() {
return (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<hr/>
<Route exact path="/" component={HomePage}/>
<Route path="/about" component={AboutPage}/>
</div>
</Router>
);
}
}
About.js
import React, { PureComponent } from 'react';
import styled from 'styled-components';
const Button = styled.button`
color: aqua;
`;
class AboutPage extends PureComponent {
render() {
return (
<div>
About
<Button>Fooobar!</Button>
</div>
);
}
}
export default AboutPage;
Home.js
import React, { PureComponent } from 'react';
import styled from 'styled-components';
const Button = styled.button`
color: orange;
`;
class HomePage extends PureComponent {
render() {
return (
<div>
Home
<Button>Fooobar!</Button>
</div>
);
}
}
export default HomePage;
因此， HomePage和AboutPage目前基本相同，但它只是一个操场。
问题是： HomePage和AboutPage的块AboutPage加载整个styled-components包。 这应该加载一次，不是吗？
正如你可以在图像上看到的， 2.chunk.js和1.chunk.js都是121kb。 我认为，只要包被多次导入，代码拆分会将styled-components移动到它自己的块中？
为了您的信息：我正在使用create-react-app并且没有运行eject所以我不知道webpack配置中的内容（如果这很重要）。
问题是缺少webpackRequireWeakId 。
代替 ...
const HomePage = RouteLoader({ loader: () => import('routes/home') })
...我必须使用...
const HomePage = RouteLoader({
loader: () => import('routes/home'),
webpackRequireWeakId: () => require.resolveWeak('routes/home')
})
...正如react-loadable的文档中所述：https：//github.com/thejameskyle/react-loadable#why-are-there-multiple-options-for-specifying-a-component
上一篇: How to prevent loading vendors multiple times with code splitting