Citate from your question:
I tried creating one Monaco instance per file,but that starts getting really sluggish around 30 instances.

你的问题的解决方案

如你所说,性能低迷.这是因为您的服务器或可能是您的客户端没有足够的内存.您必须向服务器添加更多内存,或者可以向客户端添加更多内存以获得更高性能.因为我没有足够的信息,所以我不能说它是服务器或客户端.但这种方法效率不高.

Citate from your question:
Why does IStandaloneDiffEditor have standalone in the name? Does that mean there is another way to create many diff editors that is more efficient?

什么都没有. In Wikipedia我找到了独立的答案：

Standalone software may refer to:

• Computer software that can work offline,i.e. does not necessarily require network connection to function.
• Software that is not a part of some bundled software.
• A program that run as a separate computer process,not an add-on of an existing process.
• Standalone program,a program that does not require operating system’s services to run.
• A portable application,which can be run without the need for installation procedure.

这意味着standalone与单个实例无关,您可以拥有此编辑器的多个实例.但是,您必须在计算机上拥有更多内存才能从此编辑器创建100个实例.而这效率并不高,因为你的内存中有100个大的JavaScript对象.

在其他服务上显示已更改文件之间的区别,它们仅使用DOM对象或使用DOM对象创建此对象的大型JavaScript对象中的一个大实例,而不是来自大型JavaScript对象的其他100个大实例.

在这种情况下,根据此原则,您可以使用我在下面推荐的解决方案中的代码,并在后台清除此差异编辑器中的一个实例.然后你必须将所有100个文件一个接一个地放到这个实例中,然后从DOM对象后面的一个文件中复制：

>< div class =“编辑原创showUnused”......
>< div class =“编辑器修改了showUnused”......
例如,您可以使用以下代码：

var diffPartContainars = document.querySelector('#container').querySelectorAll('.showUnused'),editorOriginalPartHTML,editorModifiedPartHTML;
 
for(var i = diffPartContainars.length; i--;)
{
    var obj = diffPartContainars[i],cln = obj.className;
 
    if(cln.indexOf('editor original') > -1)
    {
        obj.removeAttribute('style');
        editorOriginalPartHTML = obj.outerHTML;
    }
    if(cln.indexOf('editor modified') > -1)
    {
        obj.removeAttribute('style');
        editorModifiedPartHTML = obj.outerHTML;
    }
}

然后你必须从DOM对象后面的每个editorOriginalPartHTML和editorModifiedPartHTML中删除：

>< div class =“隐形滚动条水平”...
>< canvas class =“decorationsOverviewRuler”......
>< div class =“可见滚动条垂直”...
和你不能使用的所有其他对象.将editorOriginalPartHTML和editorModifiedPartHTML添加到DOM时,可以执行此操作.然后你可以从中添加一个具有合适宽度,高度和样式= div =“overflow：auto”的div对象.还有一件事你可以做得更多：对于每个div对象,你可以添加一个onclick或onmouSEOver监听器,然后用差异编辑器实例替换这个div对象视图.

在我看来,这只是提高效率的一种方式.祝好运！

推荐的有效解决方案

快速,舒适,高效的方式只有一个这个编辑器的实例,并在点击文件名时加载新的源代码,如下所示.

var diffEditor = null;
var filesContent =
{
    'SomeJavaScriptFile.js':
    {
        originalContent: 'alert("heLLo world!")',modifiedContent: 'alert("hello everyone!")',type: 'text/javascript'
    },'AnotherJavaScriptFile.js':
    {
        originalContent: 'function open(str)\n{\n\talert(str)\n}',modifiedContent: 'function output(value)\n{\n\tconsole.log(value)\n}',type: 'text/javascript'
    }
};
 
document.querySelector('#files').addEventListener('change',function(e)
{
    var fileName = this.options[this.selectedIndex].text,file = filesContent[fileName];
 
    openInDiffEditor(file);
});
 
function openInDiffEditor(file)
{
    if(!diffEditor)
        diffEditor = monaco.editor.createDiffEditor(document.querySelector('#container'));
 
    diffEditor.setModel({
        original: monaco.editor.createModel(file.originalContent,file.type),modified: monaco.editor.createModel(file.modifiedContent,file.type)
    });
}
 
//open the first file in select list:
var firstFileName = document.querySelector('#files').options[0].text;
openInDiffEditor(filesContent[firstFileName]);

<p>Please select one file on the left list to see the file differences after changes.</p>
<select id="files" size="3">
    <option selected>SomeJavaScriptFile.js</option>
    <option>AnotherJavaScriptFile.js</option>
</select>
 
<div id="container" style="height:100%;"></div>

您必须通过AJAX加载文件内容.但如果您不明白如何加载它,请问我,我会写它.

此推荐解决方案的屏幕截图