Сборка npm run не минимизирует проект reactJs

Я выполнил команду npm npm run build из корневой папки приложения reactJs, и папка сборки создается с приведенным ниже выводом в консоли.

    File sizes after gzip:

  646.8 KB  build\static\js\2.d370d4e1.chunk.js
  12.46 KB  build\static\js\main.fec451dd.chunk.js
  823 B     build\static\css\main.fc109ae9.chunk.css
  772 B     build\static\js\runtime-main.83c3e0c4.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Затем я выполнил команду serve -s build и получил следующий вывод в консоли.

INFO: Accepting connections at http://localhost:5000

Я мог видеть все файлы *.tsx, не минимизированные в инструментах разработчика. Не уверен, что я делаю неправильно и почему файлы в указанной ниже папке js не минимизированы. введите здесь описание изображения

package.json

 {
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.68",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "node": "^15.4.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "3.4.3",
    "typescript": "^3.7.5",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prod": "webpack --mode production"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "ts-loader": "^8.0.12",
    "typescript": "^3.7.5",
    "webpack-cli": "^4.3.0"
  }
}

reactjs npm-build react-scripts minify
person Nofi    schedule 27.12.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Установка явно правильная. То, что вы видели, было просто sourcemap, которое должно сопоставляться с исходным кодом (для целей отладки), поэтому вы можете искать в браузере devtool.

В основном sourcemap генерируется установкой по умолчанию cra в файле конфигурации webpack.

Однако, если вы хотите остановить его создание, вы можете сделать это через CLI:

package.json

{
  "scripts": {
    // ...
   "build": "GENERATE_SOURCEMAP=false react-scripts build",
    // In case of using Windows:
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
  }
}

Тогда вы больше не увидите свой код под devtool.

person tmhao2005    schedule 27.12.2020
comment
я добавил сборку: GENERATE_SOURCEMAP = ложная сборка реактивных скриптов. Когда я выполняю npm run build, получаю ошибку GENERATE_SOURCEMAP, которая не распознается как внутренняя или внешняя команда, - person Nofi; 27.12.2020
comment
Похоже, вы используете Windows, тогда команда будет немного другой. Посмотрите еще раз на мой обновленный ответ - person tmhao2005; 27.12.2020
comment
Да, я использую окна. Даже после использования GENERATE_SOURCEMAP=false в соответствии с вашим обновленным ответом файлы не минимизируются. В инструментах разработчика я смог найти все полные файлы внутри localhost: 5000->static->js. - person Nofi; 27.12.2020
comment
Вы проверили свой build/static/js, чтобы убедиться, что файлы .map отсутствуют (если файлы карты все еще есть, ваша команда не работает должным образом)? Также сохраните один командный скрипт build. - person tmhao2005; 27.12.2020
comment
вы правы, я все еще мог видеть 3 файла карты внутри папки js. Я вручную удалил эти 3 файла карты, и теперь в инструментах разработчика я не вижу необработанных файлов tsx. Большое спасибо за указание на файлы карты!. До сих пор не знаю, почему файл карты генерируется даже с GENERATE_SOURCEMAP=false. - person Nofi; 28.12.2020

arrow_upward
0
arrow_downward

Установите расширение React Developer Tools. Наведите указатель мыши на расширение, если оно говорит, что вы используете производственную сборку, тогда ваши файлы будут минимизированы. Как вы можете видеть на изображении ниже. Также читайте о производственной сборке из официальной документации React.

https://reactjs.org/docs/optimizing-performance.html

person Mudassar hassan    schedule 27.12.2020