如何实现根据依赖需要注入common chunk？

lsycxyj commented 2 years ago

提问前请确认以下几点信息，否则你的问题将不会被解答

参考 https://zhuanlan.zhihu.com/p/25795393 学会正确的提问方式
确定已经阅读过文档 http://doc.ssr-fc.com/ 并且文档中搜索不到相关答案
对应服务端框架的使用问题请去它们的官方文档找答案。例如 Midway, Nest.js
如果你确认当前是一个 bug 请给最简复现仓库。只有一张图或者信息不足的问题将会被直接关闭
原则上这里只解答与本框架有关的问题。关于其他问题例如 Node.js 怎么连 Mysql 怎么获取 cookie 这种基础问题你应该去 Google 找答案而不是在这里。

详细描述你的问题

设有A/B/C/D四个页面，AB共用X集合的库，CD共用Y集合的库，按目前配置，只能显式同时在所有页面注入X+Y的chunk，页面会加载了其他不需要的集合的chunk 原因在于目前injectJS的chunk声明是hardcode，不是通过依赖收集注入的

期望的结果

期望仅根据依赖注入需要的资源，而不是用户自己显式声明注入的common entry chunk（目前也无法动态根据依赖情况注入）

当前使用的版本

不要贴 package.json 用 yarn list "ssr*" 来查看版本。同时建议熟读semver 规则并且知道怎么安装最新依赖！

复现仓库地址

超过一行代码能描述的问题必须提供复现地址, 用默认的 example 给最简单的复现代码不要给包含着一堆业务代码的仓库

你本人对问题可能的原因判断(如果你能大概判断的话)

zhangyuang commented 2 years ago

用vite构建

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: Light Leung @.> 发送时间: 2022年4月15日 11:11 收件人: zhangyuang/ssr @.> 抄送: Subscribed @.***> 主题: Re: [zhangyuang/ssr] 如何实现根据依赖需要注入common chunk？ (Issue #188)

提问前请确认以下几点信息，否则你的问题将不会被解答

参考 https://zhuanlan.zhihu.com/p/25795393 学会正确的提问方式

确定已经阅读过文档 http://doc.ssr-fc.com/ 并且文档中搜索不到相关答案

对应服务端框架的使用问题请去它们的官方文档找答案。例如 Midway, Nest.js

如果你确认当前是一个 bug 请给最简复现仓库。只有一张图或者信息不足的问题将会被直接关闭

原则上这里只解答与本框架有关的问题。关于其他问题例如 Node.js 怎么连 Mysql 怎么获取 cookie 这种基础问题你应该去 Google 找答案而不是在这里。

详细描述你的问题

设有A/B/C/D四个页面，AB共用X集合的库，CD共用Y集合的库，按目前配置，只能显式同时在所有页面注入X+Y的chunk，页面会加载了其他不需要的集合的chunk 原因在于目前injectJS的chunk声明是hardcode，不是通过依赖收集注入的

期望的结果

期望仅根据依赖注入需要的资源，而不是用户自己显式声明注入的common entry chunk（目前也无法动态根据依赖情况注入）

当前使用的版本

不要贴 package.json 用 yarn list "ssr*" 来查看版本。同时建议熟读semver 规则并且知道怎么安装最新依赖！

复现仓库地址

超过一行代码能描述的问题必须提供复现地址, 用默认的 example 给最简单的复现代码不要给包含着一堆业务代码的仓库

你本人对问题可能的原因判断(如果你能大概判断的话)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

lsycxyj commented 2 years ago

webpack有解法吗？生态都依赖于webpack

zhangyuang commented 2 years ago

自己用splitchunk分割vendor

lsycxyj commented 2 years ago

我可以分割vendor，但我的问题在于如何实现自动AB页面使用X chunk，CD页面使用Y chunk，而不是靠自己传XY进所有页面？

zhangyuang commented 2 years ago

import type { UserConfig, ISSRMidwayKoaContext } from 'ssr-types'

const userConfig: UserConfig = {
  chainClientConfig: chain => {
    chain.optimization.splitChunks({
      ...chain.optimization.get('splitChunks'),
      cacheGroups: {
        'vendor-swiper': {
          test: (module: any) => {
            return module.resource &&
              /\.js$/.test(module.resource) &&
              module.resource.match('swiper')
          },
          name: 'vendor-swiper',
          priority: 3
        },
        ...chain.optimization.get('splitChunks').cacheGroups
      }
    })
  },
  extraJsOrder: (ctx) => {
    const ctxWithType = ctx as ISSRMidwayKoaContext
// 只有访问首页的时候加载 vendor-swiper
    if (ctxWithType.path === '/') {
      return ['vendor-swiper.js']
    }
  }
}

export { userConfig }

大概是这么用，晚点发一下版

zhangyuang commented 2 years ago

close by http://doc.ssr-fc.com/docs/api$config#/extraJsOrder

zhangyuang / ssr