Nginxの静的圧縮とコード圧縮を実践するとWebサイトのアクセス速度が大幅に向上します！

原文：juejin.cn/post/7101663374957608974

現在のアプリケーションのほとんどでは、フロントエンドとバックエンドの分離フレームワークが使用されており、Vue のフロントエンドアプリケーションも非常に人気があります。このような問題に遭遇したかどうかはわかりません。

フロントエンドフレームワークのページでは、機能開発が反復され続け、インストールの依存関係が増加し続けます。

これによって生じる問題は、フロントエンドフレームワークが非常に大きくなり、パッケージ化された dist ディレクトリが非常に大きくなってしまうことです。！！

これにより、アプリケーションへの初めてのアクセスが非常に遅くなるという問題が発生します。！！

これは実に深刻な問題です！！！T_T

この問題について、今日はコード圧縮 + nginx 静的リソース圧縮の 2 つの側面から調査して解決していきます! ！！

nginx静的リソースの動的圧縮

nginx は gzip 圧縮を有効にします

server {
        listen       80;
        listen  [::]:80;
        server_name  localhost;
        server_tokens off;

        # 开启gzip压缩
        gzip on;
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain application/css text/css application/xml text/javascript application/javascript application/x-javascript;

        #llsydn 前端
        location /jxbp {
             alias  /opt/llsydn/jxbp;
             index index.html;
             try_files $uri $uri/ /dist/index.html;
        }
 }

次に、nginx を再起動します。nginx -s reload

うまくいくかどうか見てみましょう！！！

圧縮されたレンダリング

圧縮なしの効果画像

上の 2 つの写真からわかるように、次のとおりです。

最初のものは圧縮されています。終了時間は 2.36 秒、転送量は 7.6MB です。
2 番目のものは圧縮されていません。終了時間は 6.32 秒、転送量は 24.6MB です。

明らかに、nginx の静的リソース圧縮後、アクセス速度が大幅に向上しました。！！

これを見ると、このような問題が発生しますこの圧縮はすべて nginx によって行われますアクセス数が増加すると、nginx への負荷が非常に大きくなります結局、動的圧縮されます! ！！

解決策はありますか?

nginx の静的リソースの動的圧縮の原理は、js、css、およびその他のファイルを .gz ファイルに圧縮し、それを分析のためにフロントエンドブラウザーに送信するのに役立つだけです。これについて言えば、「まず js、css、その他のファイルから対応する .gz ファイルを生成しましょう。それでは nginx の動的圧縮は必要ないのですか?」と言わざるを得ません。どうやらそうです！！！

天才！！！

nginx静的リソースの静的圧縮

js、css、その他のファイルから対応する .gz ファイルを生成

これはいくつかの依存関係で処理できます。compression-webpack-plugin

インストールの依存関係:

npm install compression-webpack-plugin -D

view.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({
    test:/.js$|.html$|.\css/, // 匹配文件名
    threshold: 1024, // 对超过1k的数据压缩
    deleteOriginalAssets: false // 不删除源文件
}))

パック：

npm run build

ご覧のとおり、対応する .gz ファイルが生成されています。！！

nginxの設定

上記を踏まえてプラス

gzip_static on

nginx は次のモジュールをインストールする必要があります。

ngx_http_gzip_module模块
ngx_http_gzip_static_module模块
ngx_http_gunzip_module模块

nginx は gzip 圧縮を有効にします

server {
        listen       80;
        listen  [::]:80;
        server_name  localhost;
        server_tokens off;

        # 开启gzip压缩
        gzip on;
        gzip_static on
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain application/css text/css application/xml text/javascript application/javascript application/x-javascript;

        #llsydn 前端
        location /jxbp {
             alias  /opt/llsydn/jxbp;
             index index.html;
             try_files $uri $uri/ /dist/index.html;
        }
 }

次に、nginx を再起動します。nginx -s reload

うまくいくかどうか見てみましょう！！！

静的圧縮

動的圧縮

さて、nginxの静的圧縮が登場しました！！！

2.素晴らしい！Java コルーチンが登場します。。。

3. Spring Boot 2.x チュートリアル、包括的すぎる!

4.画面を爆発や爆発で埋め尽くさないで、デコレーターモードを試してください。これがエレガントな方法です。！

気分がいいので、「いいね！」+「転送」を忘れないでください！

Nginxの静的圧縮とコード圧縮を実践するとWebサイトのアクセス速度が大幅に向上します！

おすすめ