chainClientConfig 添加splitChunks的maxSize属性会导致样式不加载

NoeyNoi commented 2 years ago

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

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

详细描述你的问题

当尝试使用webpack中splitChunks来限制vendor最大尺寸时，运行的页面会出现不加载样式的问题配置如下：

chainClientConfig: (chain) => {
    const splitChunks = chain.optimization.get('splitChunks')
    if (splitChunks) {
      splitChunks.maxSize = 1048576
      chain.optimization.splitChunks(splitChunks)
    }
  }

期望的结果

可以使用该属性

当前使用的版本

官网的demo（midway-vue3-ssr）即可复现 不要贴 package.json 用 yarn list "ssr*" 来查看版本。同时建议熟读semver 规则并且知道怎么安装最新依赖！

复现仓库地址

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

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

可能是框架内相关样式处理不兼容该属性

zhangyuang commented 2 years ago

添加额外的cacheGroups来拆分 vendor

NoeyNoi commented 2 years ago

添加cacheGroups额外的vendor

也测了cacheGroups，同样是样式加载会出问题例如

'ant-design-vue': {
    test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/,
    priority: 20,
    name: 'ant-design-vue'
  }

而且，GENERATE_ANALYSIS=true npm run build执行后发现，文档中介绍的ant-design-vue默认做的tree shaking 没有生效

zhangyuang commented 2 years ago

无最简复现问题将会被关闭

zhangyuang / ssr