Webpack-gepackte Dateien reagieren (ausführliches Tutorial)-js-Tutorial-php.cn

Webpack-gepackte Dateien reagieren (ausführliches Tutorial)

亚连

Freigeben： 2018-06-05 15:39:18

Original

2799 Leute haben es durchsucht

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/"

Nach dem Login kopieren

Paket

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

Nach dem Login kopieren

Zum Beispiel enthalten die gepackten Dateien

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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 &#39;index.html&#39; | 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"

Nach dem Login kopieren

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

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von cropper.js zum Kapseln von Vue, wie die Funktion der Online-Bildzuschneidekomponente implementiert wird (ausführliches Tutorial)

Verwenden von vue – So erstellen Sie schnell eine Single-Page-Anwendung mit CLI, sowie die aufgetretenen Probleme und einige Lösungen

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!