利用CDN加速react webpack打包后的文件詳解
更新時間：2018年02月22日 11:04:08 作者：wlchn
下面小編就為大家分享一篇利用CDN加速react webpack打包后的文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
此文不介紹webpack基本配置，如果對基本配置有疑問請查閱官方文檔。
1、配置webpack.config.js
將output.publicPath改成上傳到的cdn地址, 例（對應上面上傳配置）：
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文件中已經引入了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"
將主頁文件上傳至服務器，使用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加速后網頁。
以上這篇利用CDN加速react webpack打包后的文件詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了基于Webpack4和React hooks搭建項目的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
react是一個簡單的javascript UI庫，用于構建高效、快速的用戶界面。它是一個輕量級庫，因此很受歡迎。接下來通過本文給大家分享從 html 實現一個 react的方法，一起看看吧2021-07-07
本文主要介紹了React配置子路由的實現，我們來通過一個簡單的例子解釋一下如何配置子路由，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
react中關于函數調用()與bind this的原因及分析
這篇文章主要介紹了react中關于函數調用()與bind this的原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
本文通過實例給大家分享了編寫React組件項目實踐的全過程，對此有興趣的朋友可以參考下。2018-03-03
關于React Native使用axios進行網絡請求的方法
axios是一個基于Promise的Http網絡庫，可運行在瀏覽器端和Node.js中，Vue應用的網絡請求基本都是使用它完成的。這篇文章主要介紹了React Native使用axios進行網絡請求,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了React中引入CSS高階用法的方案詳解,至于使用react用哪種方案引入css,并沒有一個絕對的答案,可以根據各自情況選擇合適的方案,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了react ant protable自定義實現搜索下拉框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
本文主要介紹了React組件二次包裝的具體實現，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02