请教一个 vue-cli 3.0 的 webpack.splitChunks 打包的问题。

2022-05-24 16:59:15 +08:00
 BenchWidth

分包原因:当前项目特别的大,所以需要按需加载。

正常情况在 router.js 文件中新增的路由,使用 splitChunks 分割出来的块是能够路由懒加载的

export default new Router({
  routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: resolve => require(['@/components/HelloWorld'], resolve)
        }
  ]
})

但是在当前项目中,所有的路由都是从后端请求数据然后动态新增到 vue-router 中的。

export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}`], resolve)
}

这种情况下我使用 splitChunks 将指定的块分离出来,文件是被分离出来了,但是在页面加载的时候,也会和其他的组件文件加载出来。达不到页面加载的目的。和没有使用 splitChunks 分块没什么区别。

请问,有什么解决办法嘛,还是说我的 webpack 打包配置有问题

955 次点击
所在节点    问与答
4 条回复
SoloCompany
2022-05-24 20:20:50 +08:00
基本知识
要么你的项目要配置成多个 entry
要么就在代码中使用 import 函数或其它方式创造 split point 来去除强依赖
passon
2022-05-24 20:30:33 +08:00
好奇这个地方用 require 和 import 有什么区别
stefanieewu
2022-05-24 22:03:42 +08:00
没太看懂描述,尝试猜一下:你想某些页面进行懒加载,即加载 A 页面的时候,不会加载 B 页面的资源;
试一下用 import 懒加载
robinlovemaggie
2022-05-24 22:33:36 +08:00
@passon #2 同步 /异步加载的区别

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/855011

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX