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

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

Open sorrycc opened this issue 3 years ago • 14 comments

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 在 [email protected] 就加上了，但不支持匿名函数的导出，此版本对此进行了完善。

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

其他

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

问题反馈

https://github.com/umijs/umi/issues

Mar 09 '21 09:03 sorrycc

已升级~赞一个

Mar 09 '21 12:03 hanwenbo

迫不及待了

Mar 10 '21 03:03 afc163

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