序文：

半年以上が経ち、ようやくシステムが苦しみの海から抜け出し、オンラインで使えるようになりました。サーバーが遅いのですが、どうすればよいでしょうか? パニックになった、バグが多すぎるのか？！? 絡みに加えて、問題を見つけてそれを実行することにしました。以下の方法は参考用であり、普遍的なものではない可能性があります。

最終結果を確認してください

1. 本番環境とテスト環境の違い

実稼働環境は常に非常に遅く、テスト環境ははるかに高速になることがわかります。f12 は言うまでもなく、実稼働環境のエントリファイル app.js と依存関係パッケージ chunk-vendors.js がはるかに大きいです

次に、パッケージ化コマンドを探します。実稼働環境は、実際に次の構成を使用してデル構成ファイルを独自に作成しました。テスト環境には vue-cli が付属しています。暴力的な方法（コマンドファイルの内部構造を書き換える）を使用しており、瞬間的な速度は段違いです

2. ルーティングの修正

ブラウザーリクエストを開いてリクエストを見つけます。次の写真が表示されます。強迫性障害患者、その写真は極度の不快感を引き起こします（ああ、なんてことだ、私はどこだ、私は誰だ）

ここでは当面無視して構いません: この巨匠が書いたコードは電話番号だらけで、きちんと整理されていますが、どのモジュールなのかわかりません。以下に 2 つの修復方法を示します。

// 方法一 ：webpack别名配置  添加/* webpackChunkName: "Home" */ 后面对应的就是重命名的名称
{
    path: "/index",
    name: "Home",
    component: () => import(/* webpackChunkName: "Home" */ "@/views/Home.vue"),
    meta: { title: "首页", affix: true }
},

// 方法二 ：node配置  require.ensure函数 此法不推荐，看着就眼花缭乱
{
    path: "/index",
    name: "Home",
    component: 
    resolve => require.ensure([],
        () => resolve(require('@/views/Home.vue')), 'Home'),
    meta: { title: "首页", affix: true }
},

モジュールjsが多すぎて全部導入できたような気がするのですが、もしかしてルートの遅延読み込みがないのでしょうか？！しかし、コードを読んだ後、それは確かに遅延読み込みメソッドであることがわかります。それでは何が問題なのでしょうか?
ブラウザを右クリックしてソースコードを開き、次のコードを表示します。実際にはグローバルにインポートされています。プリフェッチ (vue-cli3 のプリロード) があります。いい人、まずあなたを殺しましょう。

次の設定を vue.config.js ファイルに追加します。

    chainWebpack: config => {
        // 删除预加载
        config.plugins.delete('preload');
        config.plugins.delete('prefetch');
    },

サービスを閉じ、再コンパイル (npm start など) して再度確認すると、実際に削除され、クリアされ、速度が数秒速くなります。

3. ngix + webpack 圧縮ファイル

この方法を実行すると、各 js/css/picture を圧縮できます。.gz マッピングファイルを作成する

3.1 フロントエンド

ここではまず webpack 圧縮パッケージをインストールします

npm install --save-dev compression-webpack-plugin

次に、パッケージ化を実行して試してみます。次のエラーが発生する場合があります。これはパッケージのバージョンが原因です。最新のパッケージをインストールできます。npm install --save- dev [email protected]

 ERROR  TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined

パッケージ化されたファイルにはマッピングファイル .gz が含まれます。これは、フロントエンドが成功したことを意味します。

3.2 バックエンド

バックエンドの ngix は、次の互換性のある設定を追加する必要があります

server {
        listen       8093;       #监听端口
        server_name  localhost;  #negix服务名
		gzip on;
		gzip_min_length 1k;
		gzip_comp_level 9;
		gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
		gzip_vary on;
		gzip_disable "MSIE [1-6]\.";
        location /fdk-erp-mig {
                        proxy_pass  http://192.168.1.245:8080/fdk-erp-mig;
                }
        location / {
            root   html/Mig-RefactorFDK;
            index  index.html; #首页 按出现顺序检查加载
                    }
        
         }

上記の 2 つの手順を実行すると、コードが大幅に削減されます。それでもホームページの読み込みが遅い場合は、サーバーの応答に問題があるのか、フロントエンドエントリファイル main.js に多くのものがグローバルにマウントされているのかを検討する必要があります。

main.js が依然として非常に大きい場合は、個別のニーズに応じてコンポーネントにグローバルにマウントされているものをインポートする必要があります。

ps: コンポーネントをオンデマンドでインポートします。インポートするには次の方法を使用することをお勧めします。

const SelectJobDialog = resolve =>
  require(["@/components/SelectJobDialog.vue"], resolve); // 此处按需加载组件

4. 最後に、すべての vue.config.js ファイル構成を投稿します。

/*
 * @ModuleName: vue.config.js
 * @Author: liuxin
 * @Date: 2021-03-30 16:31:57
 * @LastEditors: liuxin
 * @LastEditTime: 2021-03-30 16:36:27
 */
const path = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin"); //引入压缩插件
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; //匹配此 {RegExp} 的资源
module.exports = {
    lintOnSave: false,
    productionSourceMap: false, // 去除源码映射
    publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
    // 开发环境及代理配置
    devServer: {
        open: true,
        port: "9999",
        proxy: {
            "/api": {
                // 代理地址
                target: "此处自行修改代理地址，防止跨域",

                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    "^/api": ""  // 路径重写
                }
            }
        }
    },

    pluginOptions: {
        "style-resources-loader": {
            preProcessor: "scss",
            patterns: [
                // 需要全局导入的scss路径
                path.resolve(__dirname, "./src/assets/styles/vars.scss"),
                path.resolve(__dirname, "./src/assets/styles/global.scss")
            ]
        },
    },
    outputDir: process.env.outputDir, // 打包生成的文件夹名称

    chainWebpack: config => {
        // 删除预加载
        config.plugins.delete('preload');
        config.plugins.delete('prefetch');
    },
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
                // filename: '[path].gz[query]', // 提示[email protected]的话asset改为filename
                //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
                algorithm: 'gzip',
                //所有匹配该正则的资源都会被处理。默认值是全部资源。
                test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
                //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
                threshold: 10240,
                //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
                minRatio: 0.8
            })
        ]
    },
};

システム読み込み遅い最適化処理について（vue-cli4パッケージ化）

序文：