反應：CDNs，Node_Modules和兩者的良好實踐

在create-react-app之上構建了一個React應用程序，該應用程序通過react-scripts使用Webpack並在我們的package.json中使用React/Redux/React-dom等作爲依賴關係。反應：CDNs，Node_Modules和兩者的良好實踐

要使用這些JS依賴關係，我們使用import語句，但是，對於其他JS依賴項（即在Bootstrap和jQuery中使用的JS），我們通過CDN導入這些依賴項。（我們的CSS目錄中有Bootstrap CSS文件，並使用import語句）。

在前端使用CDN vs node_modules還是兩者都有普遍接受的做法？

我最初的想法是使用CDN來獲取靜態JS文件，如果你不打算在JS文件中使用它們作爲導入，但是想知道這是否是正確的思考方式。

顯然這不是一個React的具體問題，只是使用React來提供更多的上下文。

來源

2017-05-26 devonJS

您應該爲自己的版本提供服務，因爲您的網頁可用性取決於CDN是否正在更新/未更改。它也需要多個請求來獲得所有的代碼，所以加載時間通常會更長。 – Thiatt

肯定有意義，很好奇，如果有CDN的特定優勢與服務您自己的，因爲許多網站仍然使用CDN – devonJS

@Thiatt不正確。 Bootstrap和Jquery很可能已經被緩存在瀏覽器中，並且可以從不同的域資產中並行下載。 – bugwheels94

這是我一般做：

（1）設置webpack.config.js承擔全球React和ReactDOM變量可用，以防止它們被transpiled，精縮，並捆綁在每一個版本。您仍然可以使用import語句在你的文件，和以前一樣，但庫將不會在你的最後包：

externals: { 
    'react': 'React', 
    'react-dom': 'ReactDOM' 
}

（2）使用CDN像http://www.jsdelivr.com/，它可以讓你獲得多個腳本作爲一個單一的串聯字符串，在一個請求中。這將最小化加載時間。（可選）安裝React和ReactDOM作爲代價，並讓構建過程將縮小的js文件node_modules/react(-dom)/dist複製到項目的公共文件目錄中，然後爲頁腳底部的變量創建簡單檢查，注入包括指向你的服務器，如果CDN呼叫發生失敗。例如：

if (!window.React) { 
    $('head').append('<script src="/js/react.min.js">') 
}

來源

2017-05-26 21:33:03

反應：CDNs，Node_Modules和兩者的良好實踐

回答

相關問題