Анализ зависимостей приложения create-react-app

Я знаю 2 отличных инструмента для визуализации JS-пакета React:

  1. source-map-explorer
  2. Webpack.analyse

источник-карта-проводник

Первый показывает размеры и размещение модулей внутри связки. Этот инструмент читает исходные карты и рисует диаграмму. Итак, убедитесь, что исходные карты включены для вашего проекта. Пользоваться им очень просто:

  1. установить через yarn add -D source-map-explorer
  2. добавьте эту строку в scripts часть package.json файла: “analyse”: “source-map-explorer build/static/js/main.*”
  3. построить проект, а затем запустить yarn analyse

Webpack Analyze

Второй инструмент считывает файл «статистика веб-пакета». CRA не может этого сделать без небольшого взлома. И вот она:

  1. установить yarn add -D stats-webpack-plugin
  2. добавьте этот код:
new (require('stats-webpack-plugin'))('stats.json', {chunkModules: true,}),

к webpack.config.prod.js, расположенному в node_modules/react-scripts/config. Этот код нужно добавить в раздел plugins конфигурационного файла.

3. скомпилируйте проект, и вы найдете stats.json файл в папке build.

4. Загрузите его в https://webpack.github.io/analyse/ и наслаждайтесь :)