将2000 ts模型加载到用于intellisense的摩纳哥编辑器的性能方法
将2000 ts模型加载到用于intellisense的摩纳哥编辑器的性能方法
提问于 2022-10-03 14:08:45
我正在尝试从2000+ .ts文件中获取摩纳哥编辑器中的intellisense。加载模式需要4到5秒，但是自动完成建议在10-15秒之后出现，并且“加载.”都被看到了。
下面是我的代码的简化版本，可以在摩纳哥游乐场中运行
monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: true,
noSuggestionDiagnostics: true
});
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: true,
noSuggestionDiagnostics: true
});
editor = monaco.editor.create(
document.getElementById('container'),
{
minimap: { enabled: true },
scrollBeyondLastLine: true,
// model: null,
language: 'typescript',
theme: 'vs-dark',
value: 'function () {}\n\n'
}
);
// simulate 2000 .ts files
for (var fileIdx = 0; fileIdx < 2000; fileIdx++) {
for (var fnIdx = 0; fnIdx < 1; fnIdx++) {
monaco.editor.createModel(`
function test_${fileIdx}_${fnIdx}() {}
function fn_${fileIdx}_${fnIdx}() {}
function foo_${fileIdx}_${fnIdx}() {}
function bar_${fileIdx}_${fnIdx}() {}
function out_${fileIdx}_${fnIdx}() {}
`,
'typescript'
);
}
}我跟踪了https://github.com/microsoft/monaco-editor/issues/2030和来自多个文件的摩纳哥编辑器intellisense，但没有运气。
有人能为实现这一目标的表演方式提供一些启示吗？
Mod 1：
加载.d.ts文件而不是.ts文件(直接从这里获取)：
monaco.languages.typescript.javascriptDefaults.setEagerModelSync(false);
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(false);
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: true,
noSuggestionDiagnostics: true
});
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: true,
noSuggestionDiagnostics: true
});
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES2016,
allowNonTsExtensions: true,
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
module: monaco.languages.typescript.ModuleKind.CommonJS,
noEmit: true,
typeRoots: ["node_modules/@types"]
});
// Case #1: Load 2000 .d.ts files with each having 1 function declaration
let extraLibs = []
for (let i = 0; i < 2000; i++) {
extraLibs.push(
{
content: `export declare function next${i}() : string`,
filePath: monaco.Uri.file(`/node_modules/@types/external${i}/index.d.ts`).toString(true)
}
);
}
// Case #2: Load 1 .d.ts file with 2000 function declarations
/*let def = ''
for (let i = 0; i < 2000; i++) {
def = def.concat(`export declare function next${i}() : string\n`);
}
let extraLibs = []
extraLibs.push(
{
content: def,
filePath: monaco.Uri.file(`/node_modules/@types/external1/index.d.ts`).toString(true)
}
);*/
monaco.languages.typescript.typescriptDefaults.setExtraLibs(extraLibs);
extraLibs.forEach((lib) => monaco.editor.createModel(lib.content, "typescript", monaco.Uri.parse(lib.filePath)))
var jsCode = `import * as x from "external1"
const tt : string = x.next1();`;
monaco.editor.create(document.getElementById("container"), {
model: monaco.editor.createModel(jsCode, "typescript", monaco.Uri.file("main.tsx")),
});Observation:在加载每个有一个函数声明的2000 .d.ts文件时，perf不是很好。但是当加载一个带有2000函数定义的.d.ts文件时，建议是即时的。即使增加到20000个函数声明，perf也是好的。但在我的例子中，我有3000+ ts文件。
回答 1
Stack Overflow用户
发布于 2022-10-05 13:09:46
要完成代码，只需掌握库的类型，而不是完整的源代码。这通常是通过向摩纳哥TS/JS引擎添加类型(类型声明)来实现的：
public static addTypings(typings: string, source: string): void {
if (monaco.languages.typescript) {
monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, source);
monacolanguages.typescript.typescriptDefaults.addExtraLib(typings, source);
}
}对于第三方库，它们通常带有类型(当从TS代码生成时)。否则，https://github.com/DefinitelyTyped/DefinitelyTyped可能会提供帮助。
如果您想要加载的代码是您自己的，并且是在类型记录中编码的，那么您可以通过tsc发送它，让它为您生成类型。否则就手动写。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73936684
复制相关文章
相似问题
腾讯云开发者
