Symfony 4.4下Yarn Encore dev构建缓慢及JS加载异常求助

问题现象 #

• 执行yarn encore dev或yarn encore dev --watch时，90%的场景构建速度极慢，仅10%能快速完成
• 页面加载时，90%概率会随机出现1-2个JS文件加载延迟1-2.5分钟
• 移除.addEntry()配置的自定义JS文件（除app.js外）后，页面加载仅需3秒
• 使用encore dev --watch时，部分vendor-node-...格式JS文件加载缓慢，且伴随本地电脑严重卡顿

环境信息 #

• 操作系统：Windows 10
• 工具版本：Yarn v1.22.5、VS Code v1.70.2
• 框架与依赖：Symfony 4.4、symfony/webpack-encore-bundle v1.11.1、@symfony/webpack-encore v1.1.2
• 执行环境：VS Code终端

已尝试无效操作 #

• 更新browserslist数据库
• 删除build目录文件
• 清除Symfony缓存、浏览器缓存及Yarn缓存
• 更换终端执行命令
• 重新克隆仓库
• 切换至PHP内置服务器
• 切换旧分支（仅首次构建正常，后续问题复现）

解决方案建议 #

1. 优化Entry配置 #

• 将多个自定义JS合并为单个entry，降低Webpack编译拆分的压力：

  // webpack.config.js
  .addEntry('app', [
      './assets/js/app.js',
      './assets/js/custom1.js',
      './assets/js/custom2.js'
  ])
  

• 对非首屏必需的自定义JS，采用动态导入（import()）实现懒加载，避免首屏资源阻塞：

  // 在需要的地方动态加载
  document.addEventListener('DOMContentLoaded', () => {
      import('./assets/js/custom-lazy.js').then(module => {
          module.init();
      });
  });
  

2. 调整Watch模式配置 #

• 增加监听忽略规则，减少不必要的文件监听以降低CPU占用：

  // webpack.config.js
  .configureWatchOptions(options => {
      options.ignored = /node_modules|public|var/;
  })
  

• 针对Windows系统文件监听的兼容性问题，降低轮询频率：

  // webpack.config.js
  .configureWatchOptions(options => {
      options.poll = 1000; // 每秒轮询一次，可根据实际情况调整
  })
  

3. 优化代码拆分策略 #

• 调整拆分规则，避免生成过多碎片化的vendor-node-*文件：

  // webpack.config.js
  .splitEntryChunks()
  .configureSplitChunks(config => {
      config.minSize = 20000; // 增大拆分的最小文件体积阈值
      config.maxSize = 100000; // 设置最大文件体积，平衡加载速度与缓存效率
      config.cacheGroups = {
          default: false,
          vendors: false,
          vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
              chunks: 'all'
          }
      };
  })
  

4. Windows系统专属优化 #

• 关闭VS Code的自动保存、实时预览等功能，减少文件系统的并发操作
• 切换至Node.js LTS版本（推荐v14.x或v16.x），规避旧版Encore与高版本Node的兼容性问题
• 将项目目录添加至Windows Defender白名单，排除杀毒软件对编译过程的干扰

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