ReactJS - 從服務器請求兩次的文件

我剛開始使用ReactJS，我正在關注「Gettind Started」中的簡單示例。ReactJS - 從服務器請求兩次的文件

這是我的HTML文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React!</title> 
    <script src="js/reactjs/react.min.js"></script> 
    <script src="js/reactjs/react-dom.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    <script type="text/babel" src="js/main.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    </body> 
</html>

它的工作原理。但是，如果我使用Fiddler觀看網絡流量，我會看到main.js被從服務器拉出兩次。這是故意的嗎？錯誤？

來源

2016-04-26 developer82

只要瀏覽器遇到以下行

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
<script type="text/babel" src="js/main.js"></script>

瀏覽器問題的HTTP兩個文件的請求。但是因爲js/main.js是瀏覽器的'text/babel'類型，所以它不會被賦給JavaScript引擎來解析/執行。正確的是，因爲'main.js'可能有ES6代碼，瀏覽器現在不會理解它。一旦babel的browser.min.js加載並執行，它會在DOM中搜索類型爲'text/babel'的腳本標籤，然後發出XHR請求來加載該文件。之後，browser.min.js將'main.js'中的代碼編譯成ES5，然後執行它。這是它的工作方式。

由於瀏覽器的緩存中已經有來自早期請求的'js/main.js'，所以babel的browser.min.js爲'js/main.js'發出的XHR請求由緩存本身提供，所以在那裏將不會有任何額外的外部http請求。

來源

2016-04-26 08:37:48

稍後對生產做些什麼？還是在生產之前有一個步驟？ – developer82

當你想在客戶端/瀏覽器端編譯和轉換ES6代碼時，這就是它的工作原理。爲了生產，最好使用webpack。 Webpack將採用babel模塊，針對'React/ES2015'預設運行您的代碼並生成js文件，該文件將作爲您的應用程序的入口點。 –

ReactJS - 從服務器請求兩次的文件

回答

相關問題