我如何制作 react-create-app 來縮小我的代碼？

Question

我需要在服務器上縮小我的代碼。 它告訴我npm run build做了所有的縮小工作 但是在我的服務器上（當然我不是通過localhost訪問它）它顯示了所有代碼。 我在pom.xml的 pom.xml 中做npm run build 。 我的 package json 包含反應腳本的實際版本。

所有代碼均由 nginx 提供。

好的，我已經看到了這個Create-react-app 何時混淆或縮小代碼？ 和這個GENERATE_SOURCEMAP=false 問題並閱讀這個https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-howgenerate它告訴我Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files. 所以它告訴我源映射是我看到我的代碼的原因。

還有一個沒有 devTools 的 Firefox 瀏覽器，我在其中關閉了源映射

並且...它按原樣向我顯示了代碼！

為什么盡管“ npm run build build as minified”，它仍然向我顯示代碼？ 請告訴我我哪里不好，我該如何解決？ 順便說一句，到處都寫着 *.env 應該在根目錄中。 整個項目的根目錄還是只有前端文件夾？

Answer 1

我的感覺是，您的大部分問題實際上都與縮小代碼的實際含義有關。

定義

縮小，也稱為最小化，是在不改變其功能的情況下從 JavaScript 源代碼中刪除所有不必要字符的過程。 這包括刪除空格、注釋和分號，以及使用較短的變量名和函數。 JavaScript 代碼的最小化導致文件大小緊湊。

資料來源： 為什么要縮小 JavaScript 代碼？

應用於創建 React App

在您的情況下， npm run build命令將執行由Create React App提供的react-scripts build 。 該文檔解釋了它的作用：

將用於生產的應用程序構建到 build 文件夾。 它在生產模式下正確捆綁 React 並優化構建以獲得最佳性能。

構建被縮小並且文件名包含哈希。 如有必要，可以啟用類名和 function 名稱以進行分析。 有關更多信息，請參閱生產構建部分。

來源： 創建 React 應用程序：npm 運行構建

當npm run build運行時，會創建一個build文件夾。 在./build/static內，您通常會找到您的縮小代碼（javascript、css、媒體等）。

在./build/static/js你可能會找到以下文件：

- [hash].chunk.js
- [hash].chunk.js.map
- main.[hash].chunk.js
- main.[hash].chunk.js.map
- runtime-main.[hash].chunk.js
- runtime-main.[hash].chunk.js.map

注意：確切的 output 會因您的 Create React App 版本而異。

什么是源地圖？

正如您在上面所注意到的，構建文件夾包含每個.js文件的*.js.map文件，這些是源映射。

生成這些的原因是出於調試目的。 如果您嘗試使用瀏覽器的開發人員工具調試您的代碼，那么您將很難理解您的縮小（可能還有丑陋的代碼）。 通過添加這些.map文件，您的瀏覽器可以加載這些文件（通過使用 HTTP 標頭）並像查看原始代碼一樣表示您的代碼。

您可以在此處找到更多信息： MDN - 使用源 map

開發者工具“Inspector”

每個主流瀏覽器都有一種使用“開發人員工具”查看或調試應用程序的方法。 這些開發人員工具通常會顯示一個經過修改的代碼版本，以便開發人員更容易閱讀。

如果您想驗證您的 HTML 代碼是否被縮小，您可以檢查兩件事：

• 檢查您的./build/index.html文件並確保您的 web 服務器僅托管build文件夾
• 而不是使用“檢查器”，而是查看頁面源代碼（通常您可以通過右鍵單擊頁面並選擇“查看頁面源代碼”來查看）

Answer 2

出色地，

1. 我們如何檢查我們是否看到代碼，代碼是否最小化？

我們應該在服務器上使用 go 並在源代碼中鍵入 js，例如文件擴展名。 如果它們很明顯 - 最小化（混淆和丑化）不起作用（那是我的情況）

2. 我們需要刪除源映射以禁止用戶查看我們的代碼。

另一種解決方案是在項目的根目錄中創建一個名為 .env 的新文件，並在文件中包含以下內容。 下次運行 build 時，這將刪除 build/static/js 文件夾中的所有 .map 文件。

對我不起作用。 我已經創建了 permission.env 並添加了

GENERATE_SOURCEMAP=false

進入它然后運行

npm run build

我附上了截圖，我在生成的構建中搜索 *.map 擴展文件。 即使我們創建了 *.env 文件，它們也在這里。

所以我添加了

  },
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

在我的package.json中運行npm run build 。 我們可以看到沒有 map 文件 - 所以該命令幫助了我們。