Preact默认脚手架构建产物超700kb远超预期，如何降至30~50kb区间

核心原因说明 #

你当前用的 default 模板是全特性模板，默认集成了路由、PWA离线支持、旧浏览器polyfill、开发辅助工具等额外依赖，官方宣传的30~50kb是纯Preact核心 + 最小业务代码gzip压缩后的传输体积，和默认模板未压缩的磁盘总大小没有可比性。

优化步骤 #

• 更换最小初始化模板
  弃用全功能的default模板，改用最小模板初始化项目，无任何冗余依赖：

  npx preact-cli create simple my-project
  

  该模板初始化后执行npm run build，未压缩的磁盘体积通常在150kb以内，gzip压缩后刚好落在30~50kb的目标区间。

• 现有default模板优化
  如果已经基于default模板开发，可通过以下配置裁剪体积：

  1. 移除冗余依赖：卸载不需要的preact-router、workbox相关PWA包、旧版本polyfill包
  2. 修改项目根目录下的preact.config.js，添加以下配置：

  export default {
    // 关闭PWA支持，移除workbox相关代码（可减少200~300kb体积）
    pwa: false,
    // 关闭旧浏览器polyfill，仅兼容现代浏览器（可减少100~200kb体积）
    polyfills: false,
    // 关闭生产环境sourcemap，不需要调试的情况下可开启
    sourcemap: false,
    // 关闭SSR预渲染，不需要SSR的情况下可开启
    prerender: false
  }
  

• 体积校验注意事项
  不要直接统计build文件夹的磁盘总大小，需要统计gzip压缩后的传输体积：

  1. 执行构建命令时添加体积分析参数：npm run build -- --analyze
  2. 查看构建日志中输出的gzip压缩后体积数值，该值才是用户实际加载的体积大小。

内容的提问来源于stack exchange，提问作者Sobhan Jahanmard