V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
BenchWidth
V2EX  ›  问与答

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

  •  
  •   BenchWidth · 2022-05-24 16:59:15 +08:00 · 798 次点击
    这是一个创建于 674 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    正常情况在 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 打包配置有问题

    4 条回复    2022-05-24 22:33:36 +08:00
    SoloCompany
        1
    SoloCompany  
       2022-05-24 20:20:50 +08:00 via iPhone
    基本知识
    要么你的项目要配置成多个 entry
    要么就在代码中使用 import 函数或其它方式创造 split point 来去除强依赖
    passon
        2
    passon  
       2022-05-24 20:30:33 +08:00
    好奇这个地方用 require 和 import 有什么区别
    stefanieewu
        3
    stefanieewu  
       2022-05-24 22:03:42 +08:00
    没太看懂描述,尝试猜一下:你想某些页面进行懒加载,即加载 A 页面的时候,不会加载 B 页面的资源;
    试一下用 import 懒加载
    robinlovemaggie
        4
    robinlovemaggie  
       2022-05-24 22:33:36 +08:00
    @passon #2 同步 /异步加载的区别
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3099 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:33 · PVG 22:33 · LAX 07:33 · JFK 10:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.