Когда приложение create-react-app запутывает или уменьшает код?

У меня есть основной вопрос о webpack и реагирую на то, что я могу использовать справку (вокруг обфускации/уклонения кода).

Я использую create-react-app для create-react-app для своего приложения и, похоже, создает сборку для сборки (после yarn build).

И в этом файле кажется, что все помещено в файл main.JS и файл main.CSS и т.д. Я выталкиваю это в прямом эфире, используя "развертывание firebase" (в моем случае). Я бы хотел, чтобы мой код был очищен и не был полностью доступен любому разработчику.

Но когда я смотрю на свои приложения в Chrome, он не показывает main.JS или любые другие файлы пакетов. Он просто показывает каждый отдельный файл и именно тот код, который я написал. Любая идея, почему это так? Почему он не показывает укрупненный объединенный файл main.js на вкладке "sources" в chrome? Это связано с исходной картой?

Ответ 1

Существует лучший способ убедиться, что исходные карты не включены. Создайте файл.env в корневой папке проекта и добавьте GENERATE_SOURCEMAP=false. Вы получите возможность строить без исходных карт.

Ответ 2

React минимизирует код во время сборки и генерирует исходные карты. JS в конечном итоге становится своего рода побочным продуктом минификации, а не из-за секретности. Таким образом, конечные пользователи могут загружать скрипты быстрее, чем если бы они не были минимизированы, и вы (и все остальные) получаете возможность перемещаться по оригинальному коду, когда вы (или они) открывают Инструменты разработчика.

Если вы посмотрите каталог build/static/js после сборки, есть пары файлов .js и .map. Файлы JS загружаются с вашего веб-сайта, а файлы .map загружаются по требованию, когда открываются Инструменты разработчика.

Чтобы отключить создание исходной карты, запустите сборку с переменной среды GENERATE_SOURCEMAP установлено значение false.

GENERATE_SOURCEMAP=false npm run build

или же

GENERATE_SOURCEMAP=false yarn build

или сделайте это частью скрипта build в package.json

  {
    …
    "scripts": {
      …
-     "build": "react-scripts build"
+     "build": "GENERATE_SOURCEMAP=false react-scripts build"
    }
  }

Если вы пропустите генерацию исходной карты, файлы .map не будут запущены в производство, а ваш исходный исходный код будет недоступен никому (включая вас).

Ответ 3

Просто создайте его с --nomaps параметра --nomaps:

npm run build --nomaps

Ответ 4

Попробуй это:

{
  …
  "scripts": {
    "build": "set GENERATE_SOURCEMAP=false && react-scripts build"
  }
}

он работал для меня и больше не показывал файл .map в рабочей среде, но он по-прежнему показывает каждый отдельный файл и точно код, который мы написали, плюс папку node_modules.

может быть, это проблема firebase, потому что мы используем бесплатную версию firebase или другие бесплатные сервисы развертывания, такие как Now, surge, netlify или что-то еще? Я тоже не уверен.