Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Umi 3.4,依赖打包、webpack 5 支持、按需编译、fastRefresh 匿名函数支持等 #97

Open
sorrycc opened this issue Mar 9, 2021 · 14 comments

Comments

@sorrycc
Copy link
Owner

sorrycc commented Mar 9, 2021

Hi,好久不见。

依赖打包

依赖打包指把 node 相关依赖进行打包锁定,现在越来越多的框架和工具都这么处理,因为好处很多,

  • 安装时 0 peerDependencies Warning
  • 安装尺寸从 114M 降到 76M,详见 packagephobia
  • 依赖总量从 786 个减少到 225 个
  • 安装速度提升 1 倍(可能不止,我内网环境从 23.45s 到 4.82s)
  • 更安全和稳定,依赖全锁定,Babel 深夜发版再也影响不到 UMI

webpack 5 支持

webpack 5 的支持拖了好久,因为同时适配 webpack 4 和 5 需要处理各种 peerDependencies 比较麻烦,这次借“依赖打包”的机会可以比较平滑实现一个包的多个版本共存。

UMI 已同时支持 webpack 4 和 webpack 5 的开发,默认是 webpack 4,可通过配置 webapck5: {} 切换至 webpack 5,默认开启物理缓存,配置开启 lazyCompilation 等,详见配置文档。

export default {
  webpack5: {},
};

基于路由的按需编译

按需编译目前有两种思路,1 是基于文件,比如 Vite,2 是基于路由,比如 Next 和 Umi 1。umi 3 上了之后一直想把按需编译功能加回来,正好看到 webpack 5 的 lazy compilation 可以很好地满足需求,于是在支持 webpack 5 时就顺手加上了。

通过配置 webpack5: { lazyCompilation: {} } 可开启基于路由的按需编译,用于解项目文件数超 3000 个的巨型应用启动缓慢问题。手动试过 antd-pro 可提速一倍,但也是有代价的,后续访问路由时会做增量编译。

export default {
  webpack5: {
    lazyCompilation: {},
  },
};

fastRefresh 支持匿名函数

fastRefresh 在 umi@3.3 就加上了,但不支持匿名函数的导出,此版本对此进行了完善。

export default () => <h1>Hello UMI!</h1>;

其他

  • 升级 immer@8,修复安全问题
  • https://umijs.org/ 增加招人广告
  • 修复 generateFile 的 watcher 取消不生效
  • 优化约定式路由热编译性能

问题反馈

@hanwenbo
Copy link

hanwenbo commented Mar 9, 2021

已升级~赞一个

@afc163
Copy link

afc163 commented Mar 10, 2021

迫不及待了

@duan602728596
Copy link

有些插件和loader引入了webpack的模块(比如monaco-editor-webpack-plugin、worker-loader),
会有The 'compilation' argument must be an instance of Compilation错误。
解决方案是需要将插件从webpack引入改为从@umijs/deps引入,目前我的解决方案是@bbkkbkk/umi-webpack5-export,拿项目试了一下,能编译成功了。

@zhangchao828
Copy link

webpack 5 的 lazy compilation 在哪里有提到,在webpack官网没找到相关的信息

@sorrycc
Copy link
Owner Author

sorrycc commented Mar 10, 2021

@duan602728596 已内置处理了额外插件的 webpack 依赖问题,提 issue 给复现,我排查下具体原因吧。

@sorrycc
Copy link
Owner Author

sorrycc commented Mar 10, 2021

@zhangchao828 webpack github 上的 release notes 里找找。

@duan602728596
Copy link

@duan602728596 已内置处理了额外插件的 webpack 依赖问题,提 issue 给复现,我排查下具体原因吧。

https://github.com/duan602728596/umi-3.4-demo
worker-loader里面使用了webpack的插件,启动会导致问题

@zhangchao828
Copy link

@zhangchao828 webpack github 上的 release notes 里找找。

找到了,自己实验了一下,发现首次打开浏览器,一片空白,得手动刷新一次才行,之后就好了,hmr是正常的

@MengShaofei
Copy link

请问,umi@3啥时候可以支持私有区块的接入

@sorrycc
Copy link
Owner Author

sorrycc commented Mar 17, 2021

@MengShaofei 区块使用效果不佳,功能已暂停,短期不会投入开发。

@xiaohuoni
Copy link

我们有一个项目加了自定义的 webpack 插件。以下是比对情况:
umi@3.3.7
image
umi@3.4.4
image

@leeword
Copy link

leeword commented Mar 3, 2022

@zhangchao828 webpack github 上的 release notes 里找找。

找到了,自己实验了一下,发现首次打开浏览器,一片空白,得手动刷新一次才行,之后就好了,hmr是正常的

同遇到这个问题,有没有解决方案

@jayguojianhai
Copy link

jayguojianhai commented Mar 3, 2022 via email

@zhangchao828
Copy link

@zhangchao828 webpack github 上的 release notes 里找找。

找到了,自己实验了一下,发现首次打开浏览器,一片空白,得手动刷新一次才行,之后就好了,hmr是正常的

同遇到这个问题,有没有解决方案

现在不知道怎么样了,当时记得这个配置有个entries选项设置为false就好了,另外devServer估计也要升级到新的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants