利用CDN加速react webpack打包后的文件詳解
更新時間：2018年02月22日 11:04:08 作者：wlchn
下面小編就為大家分享一篇利用CDN加速react webpack打包后的文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
此文不介紹webpack基本配置，如果對基本配置有疑問請查閱官方文檔。
1、配置webpack.config.js
將output.publicPath改成上傳到的cdn地址, 例（對應(yīng)上面上傳配置）：
publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"
打包
NODE_ENV=production node_modules/webpack/bin/webpack.js -p
這樣打包后的文件例如有
index.html 12345678.src.js 12345678.src.css ...
此時，打包后生成的index.html文件中已經(jīng)引入了cdn文件。
<html lang="en"> <head> <title>title</title> <link href="https://your_base_cdn_url/production/cdn/12345678.src.css" rel="external nofollow" rel="stylesheet"> </head> <body id="body"> <div id="root"></div> <script src="https://your_base_cdn_url/production/cdn/12345678.src.js"></script></body> </html>
2、上傳文件至CDN
在部署腳本中寫一段上傳cdn的腳本， 例：
echo "start uploading to upyun" HOST=v0.ftp.upyun.com USER=uploader/your-username PASS=your-password cd build files=$(ls | grep -v 'index.html' | xargs) ftp -inv $HOST <<EOF user $USER $PASS mkdir /$node_env/cdn cd /$node_env/cdn mput $files bye EOF cd .. echo "finish uploading to upyun"
將主頁文件上傳至服務(wù)器，使用nginx代理
server {
listen 80;
server_name your_server_name;
access_log /var/log/nginx/your_project.log;
root /var/www/your_project/production/current;
location / {
try_files $uri /index.html =404;
add_header Pragma no-cache;
expires -5y;
}
location ~ \.(js|css)$ {
expires 360000;
add_header Cache-Control "max-age=360000;";
}
}
訪問http://your_server_name即可訪問使用CDN加速后網(wǎng)頁。
以上這篇利用CDN加速react webpack打包后的文件詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
react?echarts?tree樹圖搜索展開功能示例詳解
這篇文章主要為大家介紹了react?echarts?tree樹圖搜索展開功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
React使用高德地圖的實現(xiàn)示例(react-amap)
這篇文章主要介紹了React使用高德地圖的實現(xiàn)示例(react-amap)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
很多朋友向小編反映一個問題關(guān)于React onClick 傳遞參數(shù)的問題，當(dāng)點擊刪除按鈕需要執(zhí)行刪除操作，針對這個問題該如何處理呢？下面小編給大家?guī)砹薘eact onClick 傳遞參數(shù)的問題，感興趣的朋友一起看看吧2021-10-10
這篇文章主要介紹了React中setState的異步操作案例詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一點點參考價值，感興趣的小伙伴可以參考一下2022-08-08
React Native可復(fù)用 UI分離布局組件和狀態(tài)組件技巧
這篇文章主要為大家介紹了React Native可復(fù)用 UI分離布局組件和狀態(tài)組件使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
30分鐘精通React今年最勁爆的新特性——React Hooks
這篇文章主要介紹了30分鐘精通React今年最勁爆的新特性——React Hooks，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了在react中使用vuex的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
React需要自己開發(fā)支持插槽功能，原理：父組件組件中寫入的HTML，可以傳入子組件的props中，這篇文章主要介紹了React從插槽、路由、redux的詳細(xì)過程,需要的朋友可以參考下2022-10-10
React核心就在于虛擬DOM，也就是在React中不總是直接操作頁面真實的DOM元素，并且結(jié)合Diffing算法，可以做到最小化頁面重繪，有些時候不可避免的我們需要一種方法可以操作我們定義的元素標(biāo)簽，并作出對應(yīng)的修改。在React中提供了一種訪問DOM節(jié)點的方式，也就是這里的refs2022-11-11
react-native DatePicker日期選擇組件的實現(xiàn)代碼
本篇文章主要介紹了react-native DatePicker日期選擇組件的實現(xiàn)代碼，具有一定的參考價值，有興趣的可以了解下2017-09-09