Webpack v4创建微小的块(按路线) [英] Webpack v4 creating tiny chunks (by route)
问题描述
这是我在React应用程序中使用的一些代码.我的路线使用 react-router-config 允许我保持集中化的方式,这样我就知道总是去哪里修改或添加一些内容.
This is some of the code I'm using in my React app. My routes are written using react-router-config which allows me to keep a centralized way so I know where to go always in order to modify or add some.
const routes = [
{
component: Root,
routes: [
{
path: "/",
exact: true,
component: Home
},
{
path: "/child/:id",
component: Child,
routes: [
{
path: "/child/:id/grand-child",
component: GrandChild
}
]
}
]
}
];
然后,假设Child组件是动态导入的:
Then, let's say the Child component is dinamically imported:
const Child = lazy(() => import('./Child'));
我希望生成的块包括Child,其导入/依赖项以及GrandChild及其导入/依赖项;但实际情况是输出是一个很小的文件(1kb),仅包含该组件(子级)的行.
I would expect that the generated chunk includes Child, its imports/dependencies and the GrandChild and its imports/dependencies as well; but the reality is that the output is a tiny (1kb) file that includes only the lines of this component (Child).
我怎样才能使webpack块对/child/:id
路由至关重要?
How could I make webpack chunk all that matters for /child/:id
route?
推荐答案
鉴于目前缺乏针对这种重要功能的解决方案(我到处搜索了3天),我最终还是手动完成了.
Given the lack of solutions out there for such an important feature (I have been searching everywhere for 3 days now), I ended up doing it kind of manually.
Webpack允许指定动态导入将生成的块的名称.如果对功能中涉及的所有相关组件使用相同的名称(如果功能是分块的方法),则可以执行以下操作:
Webpack allows to specify the name of the chunk that a dynamic import will generate. If you use the same name for all the relevant components involved in a feature (if features are your approach to chunking), then you can do something like this:
/* ********************************** ACCOUNT ********************************** */
export const Account = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Account'));
export const MyConsumption = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/MyConsumption/MyConsumption'));
export const MyAccount = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/MyAccount/MyAccount'));
export const Settings = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Settings/Settings'));
export const Notifications = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Notifications/Notifications'));
/* ********************************** OTHER PRODUCTS ********************************** */
export const Sectors = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/Sectors'));
export const SectorsList = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorsList/SectorsList'));
export const SectorFile = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorFile/SectorFile'));
export const SectorRiskReport = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorRiskReport/SectorRiskReport'));
export const PressMail = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/PressMail/PressMail'));
export const ValoraInfo = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Valora/ValoraInfo'));
export const ValoraReport = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Valora/ValoraReport'));
结果将是这样的块(请注意,上面黄色的代码块上面的2个块是您在上面看到的代码的结果):
And the result will be chunks like this (notice the 2 chunks above the one in yellow, result of the code you see above):
这是值得分享的东西,也是一种创建有意义的块的方法.我的主要任务是减轻重量,而卖方则减轻重量,因此我们可以提供渐进的体验,并缓存将被用户一次又一次使用的资源.
This is something that is worth sharing and a way to create chunks that make sense. My main chunk is way lighter and the vendor one as well, so we can provide a progressive experience and cache the resources that will be used again and again by the user.
我希望我能帮助那里的人.
I hope I help someone out there.
这篇关于Webpack v4创建微小的块(按路线)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!