SuperOleg dev notes

Причина просто прекрасна - на этапе сборке, судя по всему этим занимается именно Terser, декларации функций перемещаются в место их использования.

На примере выше, код превращается примерно в такой:

function getMM({ httpClient }) {  
  ... 
  var compiled = function stringToObject(data) {
    // а вот и httpClient  в замыкании :)
    ...
  }(data) 
  ...  
} 

Дальше разберем как эта ссылка утекает в код микрофронта.

Код в методе stringToObject вызывает vm.runInThisContext, которая нам уже отдает все что экспортирует код микрофронта, который в свою очередь экспортируем специальную фабрику.

Эту фабрику мы тут же вызываем с необходимыми аргументами, один из которых функция из этого же файла, условно:

const customRequire = (...) => { ... };
 
function getMM({ httpClient }) {  
  ... 
  var compiled = function stringToObject(data) { 
    return vm.runInThisContext(data)(..., customRequire, ...) 
  }(data) 
  ...  
}  

Конечно же, объявление функции customRequire переместилось и превратилось в анонимную функцию по месту использования:

function getMM({ httpClient }) {  
  ... 
  var compiled = function stringToObject(data) { 
    return vm.runInThisContext(data)(..., (...) => { /* а вот и замыкание для нашего httpClient! */ }, ...) 
  }(data) 
  ...  
}

На скриншоте оригинальный собранный код, только после форматирования в профайлере.

🤯13

www.tgoop.com/super_oleg_dev/200

1.23K viewsedited  Aug 27, 2024 at 20:15

Причина просто прекрасна - на этапе сборке, судя по всему этим занимается именно Terser, декларации функций перемещаются в место их использования.

На примере выше, код превращается примерно в такой:

function getMM({ httpClient }) {  
  ... 
  var compiled = function stringToObject(data) {
    // а вот и httpClient  в замыкании :)
    ...
  }(data) 
  ...  
} 

const customRequire = (...) => { ... };
 
function getMM({ httpClient }) {  
  ... 
  var compiled = function stringToObject(data) { 
    return vm.runInThisContext(data)(..., customRequire, ...) 
  }(data) 
  ...  
}  

function getMM({ httpClient }) {  
  ... 
  var compiled = function stringToObject(data) { 
    return vm.runInThisContext(data)(..., (...) => { /* а вот и замыкание для нашего httpClient! */ }, ...) 
  }(data) 
  ...  
}

BY SuperOleg dev notes