Heim > Artikel > Web-Frontend > Paketdateien mit CDNs React Webpack

Paketdateien mit CDNs React Webpack

php中世界最好的语言Original: 2018-03-17 15:24:132998Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung des CDN-Reaktions-Webpacks zum Verpacken von Dateien vorstellen. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

In diesem Artikel wird nicht die Grundkonfiguration von Webpack vorgestellt. Wenn Sie Fragen zur Grundkonfiguration haben, lesen Sie bitte die offizielle Dokumentation.

1. Konfigurieren Sie webpack.config.js

Ändern Sie beispielsweise „output.publicPath“ in die CDN-Adresse, auf die hochgeladen wurde (entsprechend oben). Konfiguration hochladen):

publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"

Paket

NODE_ENV=production node_modules/webpack/bin/webpack.js -p

Zum Beispiel enthalten die gepackten Dateien

index.html
12345678.src.js
12345678.src.css
...

Zu diesem Zeitpunkt wird die Datei index.html danach generiert Verpackung hat CDN-Dateien eingeführt.

<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">
 <p id="root"></p>
<script src="https://your_base_cdn_url/production/cdn/12345678.src.js"></script></body>
</html>

2. Dateien auf CDN hochladen

Schreiben Sie ein Skript zum Hochladen von CDN im Bereitstellungsskript, zum Beispiel:

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"

Laden Sie die Homepage--Datei auf den Server hoch, verwenden Sie den Nginx-Proxy

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;";
 }
}

, um http://Ihr_Servername zu besuchen und auf die durch CDN beschleunigte Webseite zuzugreifen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Implementierung der Standard-Avatar-Füllung

Detaillierte Erläuterung der Verwendung von Babel

Das obige ist der detaillierte Inhalt vonPaketdateien mit CDNs React Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS implementiert die Standard-Avatar-FüllungNächster Artikel：JS implementiert die Standard-Avatar-Füllung

In Verbindung stehende Artikel

Mehr sehen