Monaco编辑器生产环境diff高亮失效问题解决

问题详情+背景

开发环境使用Monaco，diff可以正常显示

换到生产环境就不行了

且有以下报错

问题分析

• 情况1（文件内容错误）
  因为开发环境没问题，所以可以先排除业务代码的问题，那可能就是生产环境加的一些插件的问题，UglifyJsPlugin等做代码丑化或压缩的插件对Monaco包过度压缩，导致引用出现问题，因为我用的Webpack的压缩插件都是常用的插件，要是有问题，估计早有人爆出来了，但是实际上我还没找到同类问题，故先pending该情况；

• 情况2（打包后没有该文件）
  这种要么是文件路径出问题，导致引用找不到，要么是编译工具的锅，但我后面查看编译后的产物，也有该路径的worker文件

OK，事情到这里我就炸了，遇到了（bushi），后面意识到编译后代码都是放CDN上面的，然后指定的放CDN的路径是static下的文件（防html文件也放cdn缓存），然后Monaco包在打包时，会将逻辑代码放入静态目录的js中（走默认webpack配置文件匹配逻辑），但是生成的worker文件是直接放根目录下的，而我们这边只有静态目录下的产物才会放到cdn
所以得出结论：
Monaco的worker文件未放在静态目录下，导致没放到cdn上面，Monaco包去load这些worker时，就找不到（因为根本没有）

解决方案

将Monaco的workder文件也打包到静态目录下面，并指定worker到引用路径为静态目录下，这个可以直接配置MonacoWebpackPlugin就能实现

{
    plugins: [
        new MonacoWebpackPlugin({
          // 指定worker文件放到静态目录下
          filename: 'static/js/[name].[contenthash].worker.js',
          // 显式说明到静态资源目录去找worker文件
          publicPath: config.build.assetsPublicPath,
        }),
    ]
}

问题成功解决！！！