基于 urlimport 进行瘦身，提升编译效率

• • 1. 基于 urlimport 进行瘦身，提升编译效率
    urlImport 是 NextJS 提供的一个实验特性，支持加载远程 esmodule

    

    
    NextJS 会在本地对所加载的远程模块进行缓存，减少了我们所需构建的模块数，缺点是它会影响 treeShaking 的一个效果，因此在生产环境，建议通过 NormalModuleReplacementPlugin 对 urlimport 的依赖进行一个本地替换

  • 2. webpack 配置选择性忽略
    针对一些生成环境的配置我们可以通过区分环境来进行选择性忽略部分配置，如 module federation exposes 在开发环境我们就可以忽略掉。

    dev.conf.js

    

    
    pro.conf.js

  • 3. 开启 SWC 编译
    SWC 是基于 Rust 实现的一款开发工具，既可用于编译也可用于打包，据官方言，它比 Babel 快了 20~70 倍，NextJS 在 12 版本默认打开了 SWC 的支持。开启 SWC 后，应用的编译速度将比 Babel 快 17 倍，刷新速度快 5 倍。需要注意的是如果你通过.babelrc 自定义 babel 配置，SWC 的一些特性将会被关闭。

3.3 优化后

从以下指标可以看出我们应用的体验得到了很大提升，实际的一个交互体验也好了不少，在路由跳转上实现了类似 SPA 的一个体验，即使是各页面资源按需加载不会再出现页面卡顿的情况。

• FCP: 首次内容绘制时间 从 1.8s 优化到 0.35s，提升了近 80%

  

• lighthouse: 评分从 55 提升到了 80，TTI 从 7.3s 优化到了 2.4s,  分别提升了 30% / 64%，chrome 的最佳实践分达到了满分💯

  

• network: DomContentLoaded 从 2.42s 优化到 0.67s，提升了 77%

  

• 页面构建时间：基本满足了毫秒级实现页面编译的需求，提升了 70% 以上