Webpack + ts (babel) + Google Closure Compiler ADVANCED не работают?

Question

[SuperProshka]

Добрый день!
У меня, кажется, не простой вопрос.
Я пишу проект на TS. Настроил webpack + babel сборку. Все собирается и работает.
Но если пропустить собранный бандл через Google Closure Compiler в ADVANCED режиме, то все ломается.
Проблема в том, что после webpack в бандле используется конструкция _defineProperty(this, "variableName", 2) для объявления и синтаксис с доступом через точку для доступа к переменной.
В результате возникает несогласованное переименование https://developers.google.com/closure/compiler/doc...
Вот тут также описана проблема https://groups.google.com/g/closure-compiler-discu...

Можно ли как-то убрать defineProperty из сборки после webpack?
Как в целом писать на ts, чтобы это можно было пропустить через Closure Compiler ADVANCED?

Comments

[Aetae]

Если ты используешь GCC - подразумевается, что ты бородатый красноглазый безумец, готовый ради полутора байт выигрыша погрузиться на глубину, скрывающую ужасы за гранью человеческого понимания. Так что разбираться со всем тебе тут только самому.

Если же ты простой человек и взял GCC случайно - то выкинь его и забудь как страшный сон: стандартные минимайзеры вебпака обеспечивают достаточную для любых мыслимых задач современного веба компрессию и не требуют вообще никаких телодвижений.

[SuperProshka]

Моя основная мотивация - сделать невозможным анализ и переиспользование моего кода взятого в проде. (Размер бандла меня не интересует)
Следовательно, моя текущая позиция - что нужно, чтобы были переименованы все методы и переменные.

Я уже использовал GCC на большом проекте с webpack + javascript. Там была пара особенностей, но все работало, а здесь я столкнулся с проблемой, которую создает процесс сборки.

[SuperProshka]

Может есть state of the art подход для продакшн кода? Как делают крупные международные проекты, у которых frontend это важная часть IP (Intellectual property), например Miro?
p.s. это может казаться overhead, но мне важно аргументировано выбрать правильный способ, чтобы исключить вероятность reverse engineering и защитить IP

[Ivan Bogachev]

Моя основная мотивация - сделать невозможным анализ и переиспользование моего кода взятого в проде (размер бандла меня не интересует)

Ну т.е. по сути вам нужен javascript-obfuscator или какой-то аналогичный инструмент. Хорошие обфускаторы превращают код в полнейшую галиматью, избыточную, тормознутую, и которую в обратную сторону распутать очень очень сложно. А Google Closure Compiler - это все же изначально другой класс инструментов. Код после него вполне себе можно осознать и вычленить из него нужные алгоритмы.

[SuperProshka]

У обфускаторов помимо размера и скорости выполнения кода есть еще один важный недостаток - если там где-то будет undefined или ошибка, то даже человек, который наизусть знает исходники, не сможет понять где именно проблема.

Когда я использовал js + gcc и ловил в проде undefined или какую-то другую проблему, то у меня была возможность понять что это за место в коде, так как я знал исходники. Я просто искал рядом какие-нибудь строки и таким образом ориентировался. У меня даже была возможность дебажить.

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

[Ivan Bogachev]

Я просто искал рядом какие-нибудь строки и таким образом ориентировался

Так у нас же во фронтенде есть такой инструмент, как source maps, разве нет? Даже упомянутый обфускатор их умеет делать.

У обфускаторов есть еще один важный недостаток... будет просто черный ящик...

Так в этом и смысл. Вы же сказали, что нужно сделать невозможным анализ. Анализ черного ящика - это как раз на грани невозможного. А код после GCC выглядит как просто говнокод. Можно засучить рукава, увидеть типовые конструкции, ну а там дальше разберется понемногу. Даже тут бывали вопросы, где люди в комментариях объясняли общий смысл происходящего в сжатом коде.

[SuperProshka]

Я не пробовал source map с обфускаторами, но в целом в каком- то виде должно помочь, да.
Но я до сих пор брезговал обфускаторами, так как не хочется превращать код в избыточный и неэффективный без гарантии, что его нельзя преобразовать назад и с сохранением названий функций и переменных.

Я как-то смотрел продакшн код больших фронтовых проектов и там везде код выглядел как после GCC. То-есть переименованы все функции и переменные и нету обфускации.
При этом там явно используется Typescript, значит точно есть нормальный способ использовать typescript + gcc.
Может есть смысл посмотреть на другие сборщики?

[Aetae]

Название функций и переменных отлично умеет эврестически обратно возвращать ИИ, как пример jsnice.org (это старый ресурс, ещё до-гптшный), так что это фигня, а не защита. Да и обфускаторы прекрасно распаковываются, правда тут уже чутка придётся руками поработать.

В целом же любой код если очень хочется можно распаковать. Вопрос лишь в том, чтоб это того не стоило. Для обычного кода это того не стоит и со стандартным минификатором, а для какого-то уникального хитрого алгоритма - распакуют в любом случае как бы вы не извращались. Если у вас есть такие суперуникальные куски - можете обфусцировать только их, чтоб злодей слегка подзадолбался, если же у вас обычное корпоративное формошлёпство - я б предложил не страдать фигнёй, никому оно и даром не нужно.

P.S. По поводу _defineProperty - предположу, что оно появляется из-за преобразования синтаксиса классов в старьё. Возможно вам стоит просто поставить цели ts в esnext и в browserlist к babel указать поддерживаемые браузеры по-свежее. Все современные умеют в классы из коробки и эта фигня просто исчезнет. Однако всё же рекомендовал бы всё равно выкинуть GCC, потенциальные проблемы не стоят того.

[SuperProshka]

Про обфускаторы я понял, да.
Но крупные компании, которые делают карты, редакторы и т.д. используют ts + gcc и не используют обфускаторы.
Хочется понять как они это делают.

[Aetae]

SuperProshka, врядли. Встроенный минификатор вебпака - точно также переименовывает всё кроме встроенных функций. Если не переименовывает - вы что-то не так настроили. Хотя хз, может если видит обращение по ключу - не трогает.

[SuperProshka]

Подключил tercer, на простом коде вроде норм выглядит. Поресерчу завтра, спасибо.