实践

构建优化及开发体验 旧项目使用了 antd-design-pro，基于 umi 框架，umi 是一个整合了多个技术栈的框架，如状态管理、路由、webpack打包等。对于开发者来说，这些功能的初始化和具体配置被封装起来，开箱即用确实方便。但这么一个黑箱，除了通过官方提供的配置，我几乎无法有更进一步调整。 于是我移除了 umi，转而使用 webpack 5 从零搭起一个开发环境，过程花了不少时间去反复读文档，了解最佳实践，踩了不少坑。然而结果还是不错的，最新的技术可以带来不错的效益，实践过后也沉淀了一些东西。 依赖安装 - pnpm 与 yarn pnp npm3 维护了一个扁平的依赖结构，虽然解决 npm2 的嵌套关系过深的问题，这也使得 Node_modules文件夹变得混乱。想必身为前端基本都苦 npm 久矣，每次安装，除了网络问题，数量繁多的小文件读写，也使得这个过程艰难险阻。 后来 Facebook 带来了 Yarn，它提供了一些更好的体验，比如 lock 文件、更好的缓存控制等。但其并没有改变巨大的NODE_MODULES目录。你的电脑依然要消耗空间去存储很多重复的模块。 在之后，yarn 推出了一个被称为即插即用（pnp）的功能，它直接移除了NODE_MODULES，而是使用 一个 pnp.js 的文件，将文件指向缓存中的映射。因为少了NODE_MODULES，在 webpack 5 之前，你就需要去配置 webpack 的 resovle 模块的模块解析规则，或者使用PnpWebpackPlugin插件。而 webpack 5 则是原生支持，不需要额外的配置。 pnpm 同样是用来作为 npm 的替代，它不会去计算包的嵌套关系，并且通过硬连接将 NODE_MODULES内的文件指向机器内的一个全局存储目录，这样同一个模块只需要安装一次。安装方式很简单，比如通过脚本安装： macOS, Linux 等系统 curl -f https://get.pnpm.io/v6.js | node - add --global pnpm Windows (使用 PowerShell): (Invoke-WebRequest 'https://get.pnpm.io/v6.js' -UseBasicParsing).Content | node - add --global pnpm 安装后，就像npm install一样，使用pnpm install即可。...