Heim > Artikel > Web-Frontend > Webpack-gepackte Dateien reagieren (ausführliches Tutorial)
Webpack-gepackte Dateien reagieren (ausführliches Tutorial)
- 亚连Original
- 2018-06-05 15:39:182713Durchsuche
Im Folgenden werde ich Ihnen eine detaillierte Erklärung zur Verwendung von CDN zur Beschleunigung von React-Webpack-Paketen geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.
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 wurde die CDN-Datei in die generierte index.html-Datei eingeführt nach dem Verpacken.
<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 ins CDN hochladen
Schreiben Sie im Bereitstellungsskript ein Skript zum Hochladen ins CDN, 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 und 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;";
}
}Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Native in React verwenden, um die Bildanzeigekomponente zu implementieren
Das obige ist der detaillierte Inhalt vonWebpack-gepackte Dateien reagieren (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!