浏览器驱动webpack动态切割路由，毫秒级开发打包
一、缘起
有一个老项目，使用的技术栈是webpack+react+react-router。
随着项目的越来越大，路由越来越多，在启动webpack的时候，明显感觉到启动速度越来越慢，当路由达到上百个的时候，启动webpack的时间需要近1分钟，实在是太慢了。
而网上大多数的教程，做路由分割，都是讨论页面加载的时候进行代码分割和懒加载，并没有针对于webpack的优化。
对于webpack常见的性能优化，主要还是开启缓存、缩小查找范围、使用ESbuild替代babel编译、使用externals、使用dll只编译正在开发的代码、升级webpack版本等等，或者是用新的工具例如vite。
但是这些优化，当你的项目超大的时候，页面路由都特别多的时候，使用的效果还是捉襟见肘，因此需要更进一步的优化方案。
二、思路
既然，影响webpack开发阶段冷启动的最大因素就是页面和路由过多，那么优化的方案也就呼之欲出了，就是减少当前打包构建的路由即可。也就是说，你在开发调试哪一个页面，就告诉webpack只打包当前路由即可了，其他的我不关心。
比较low的做法，就是自己手动注释掉多余的路由，不过作为一个有追求的前端工程师，怎么能用这种刀耕火种的方式呢？
当然是写一个webpack插件才能符合我们的身份了。
这个插件，是怎么工作的呢？当启动webpack的时候，不打包任何路由，当浏览器访问页面的时候，把当前路由地址告诉webpack，webpack收到消息后，再只打包对应的路由的代码即可。
三、实践
我希望这个功能是一个插件，使用和配置要简单，直接在webpack的配置文件中使用即可：
我给他定义了2个参数，第一个就是路由列表文件的位置，第二个就是缓存的层数，有什么用呢？
我们来设想一下，当你进入了一个列表页，然后可以跳转到新增、编辑、详情页面，我不需要每次跳转都重现打包一次，所以需要缓存一定数量的路由，这样就可以省去了重复打包问题。
那我们如何让浏览器告诉webpack路由的变化呢？
我的做法是，在html-webpack-plugin插件执行完后，插入一段js代码，监听路由的变化，然后发送请求。然后在webpack中拦截约定好的请求地址。
这里我的项目比较老还是webpack3，webpack5的写法稍有不同，大家注意一下，不过原理是一样的。
然后在webpack-dev-server中before监听：
然后获取路由地址，我这里获取的是前端路由hash值的变化。匹配对应的路由进行过滤，如果涉及到正则匹配，可以使用一些路由正则库进行过滤。然后写入到临时文件即可。
想要做的更完美一点，可以自动修改文件中引用的路由文件地址替换为临时文件，不过我为了省事，是直接手动修改的。如果要做的话，就需要懂一点ast的知识，在import Declaration中匹配，然后替换为临时文件，可以参考babel-pluhin-import的实现。
四、效果
启动速度，几乎是瞬间启动，等访问页面的时候，刷新文件，重现打包对应的页面，也只花了几十毫秒，可以说大功告成。
作者：青火_
链接：https://juejin.cn/post/7062631034008895524