目录

前言：

1、生产环境和测试环境的差别

2、路由整改

3、ngix + webpack 压缩文件

3.1 前端

3.2 后端

4、最后贴出所有vue.config.js文件配置

---

前言：

经历大半年的系统，终于要跳出苦海了，上线准备投入使用，好家伙，服务器上居然这么慢，怎么办？慌得一P，难道bug太多了？！？纠结之余，还是决定找问题，说干就干。以下方式仅供参考，并不一定通用。

先查看一下最后处理的结果

1、生产环境和测试环境的差别

• 发现生产环境总是很慢，测试环境会快很多，二话不说f12，发现生产环境的入口文件app.js和依赖包chunk-vendors.js都要大很多

• 然后查找打包命令，好家伙，生产环境居然自己写了一个dell配置文件，用的是如下这玩意儿的配置，而测试环境则是vue-cli自带的。采用了暴力的方式（调换命令文件内部结构），瞬间快了不是一个档次

2、路由整改

• 打开浏览器请求，查找请求 。出现以下画面，强迫症患者，画面引起极度不适（oh my god，我在哪，我是谁）  

• 这里可以暂时忽略：这哪位大神写的代码，全是电话号码，排序倒是规整，就是不知道是哪个模块，以下提供两种修式  

// 方法一 ：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，似乎全部引入了，难道是没有做路由懒加载？！但是看了代码，确实是懒加载的写法啊，那问题出在哪呢？
• 浏览器右击，打开源码，查看到以下代码，居然全局引入了，有个prefetch（vue-cli3的预加载），好家伙，先干掉你再说

• vue.config.js文件加入以下配置

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

• 关闭服务，重新编译（npm start或其他），再查看，确实去掉了，清晰明了，一目了然，速度也快了好几秒

3、ngix + webpack 压缩文件

此方法过后，各个js/css/图片都可压缩。形成.gz映射文件

3.1 前端

• 这里首先安装webpack压缩包

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

• 然后执行打包试试，可能会出现如下错误，这是因为包的版本问题，可以安装最新包 npm install --save-dev compression-webpack-plugin@5.0.1

 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; #首页 按出现顺序检查加载
                    }
        
         }

上述两步执行完以后，代码已经明显缩小了。如果还是首页加载缓慢，需要考虑是不是服务器响应问题，或者前端入口文件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]', // 提示compression-webpack-plugin@3.0.0的话asset改为filename
                //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
                algorithm: 'gzip',
                //所有匹配该正则的资源都会被处理。默认值是全部资源。
                test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
                //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
                threshold: 10240,
                //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
                minRatio: 0.8
            })
        ]
    },
};