Как проанализировать размер сборки приложения и отреагировать на него? - PullRequest
Новая
       13

Как проанализировать размер сборки приложения и отреагировать на него?

1 голос
/ 10 марта 2020

Я следовал этому руководству: https://create-react-app.dev/docs/analyzing-the-bundle-size/ и вот-вот запустил команду analyze, чтобы увидеть, насколько велико мое приложение. это лучший способ проверить размер пакета / сборки в React / JS?

и есть ли способ не включать определенные файлы из сборки prod? как тесты? CRA обрабатывает это автоматически?

1 Ответ

1 голос
/ 10 марта 2020

Вам не нужно извлекать. Попробуйте это:

  1. установить анализатор: enter image description here
➜  simple-react-router git:(master) ✗ npm install webpack-bundle-analyzer --save-dev
  1. создать новый файл, который я назвал моим: образец . js
➜  simple-react-router git:(master) ✗ cat sample.js 
process.env.NODE_ENV = "production"
var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin

const webpackConfigProd = require("react-scripts/config/webpack.config.prod")

webpackConfigProd.plugins.push(
  new BundleAnalyzerPlugin({
    analyzerMode: "static",
    reportFilename: "report.html",
  })
)

require("react-scripts/scripts/build")
Запустить с узлом 
➜  simple-react-router git:(master) ✗ node sample.js                                
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
Creating an optimized production build...
Webpack Bundle Analyzer saved report to /Users/dixitk13/code/simple-react-router/build/report.html
Compiled successfully.

File sizes after gzip:

  54.49 KB  build/static/js/1.0ee1e308.chunk.js
  1.9 KB    build/static/js/main.73bea786.chunk.js
  763 B     build/static/js/runtime~main.229c360f.js
.
.
.

должна открыться новая вкладка браузера.

...