Анализ зависимостей приложения create-react-app
Я знаю 2 отличных инструмента для визуализации JS-пакета React:
source-map-explorer
- Webpack.analyse
источник-карта-проводник
Первый показывает размеры и размещение модулей внутри связки. Этот инструмент читает исходные карты и рисует диаграмму. Итак, убедитесь, что исходные карты включены для вашего проекта. Пользоваться им очень просто:
- установить через
yarn add -D source-map-explorer
- добавьте эту строку в
scripts
частьpackage.json
файла:“analyse”: “source-map-explorer build/static/js/main.*”
- построить проект, а затем запустить
yarn analyse
Webpack Analyze
Второй инструмент считывает файл «статистика веб-пакета». CRA не может этого сделать без небольшого взлома. И вот она:
- установить
yarn add -D stats-webpack-plugin
- добавьте этот код:
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/ и наслаждайтесь :)