vue.config settings

fir_client/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "analyz": "vue-cli-service serve analyz",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -30,11 +31,15 @@
     "@vue/cli-service": "^4.1.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-component": "^1.1.1",
+    "compression-webpack-plugin": "5.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "html-webpack-plugin": "^5.3.1",
+    "image-webpack-loader": "^7.0.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
-    "vue-template-compiler": "^2.6.10"
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue-template-compiler": "^2.6.10",
+    "webpack-bundle-analyzer": "^4.4.1"
   },
   "eslintConfig": {
     "root": true,

fir_client/src/restful/download.js

@@ -1,10 +1,5 @@
 import Axios from 'axios'
-// const https = require('https');
-Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 Axios.defaults.withCredentials = true;
-// Axios.defaults.httpsAgent = new https.Agent({
-//     keepAlive: true
-// });
 
 const DOMAIN = window.g.baseUrl;
 const APIPATH = '/api/v1/fir/server';
@@ -45,39 +40,15 @@ function getData(url, params = {}, callBack) {
                     case 400:
                         error.message = '请求错误(400)';
                         break;
-                    case 401:
-                        error.message = '未授权，请重新登录(401)';
-                        break;
                     case 403:
                         error.message = '拒绝访问(403)';
                         break;
                     case 404:
                         error.message = '请求出错(404)';
                         break;
-                    case 408:
-                        error.message = '请求超时(408)';
-                        break;
                     case 429:
                         error.message = '您的 IP 访问频繁，请稍后再次尝试';
                         break;
-                    case 500:
-                        error.message = '服务器错误(500)';
-                        break;
-                    case 501:
-                        error.message = '服务未实现(501)';
-                        break;
-                    case 502:
-                        error.message = '网络错误(502)';
-                        break;
-                    case 503:
-                        error.message = '服务不可用(503)';
-                        break;
-                    case 504:
-                        error.message = '网络超时(504)';
-                        break;
-                    case 505:
-                        error.message = 'HTTP版本不受支持(505)';
-                        break;
                     default:
                         error.message = `连接出错(${error.response.status})!`;
                 }
@@ -87,7 +58,6 @@ function getData(url, params = {}, callBack) {
             if (error.message === 'Network Error') {
                 alert('网络连接失败')
             }
-
             callBack({"code": -1});
         });
 }

fir_client/src/restful/index.js

@@ -2,7 +2,6 @@ import Axios from 'axios'
 import VueCookies from 'vue-cookies'
 import router from "@/router";
 
-// const https = require('https');
 const Base64 = require('js-base64').Base64;
 Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 Axios.defaults.withCredentials = true;
@@ -11,10 +10,7 @@ Axios.defaults.withCredentials = true;
 // });
 
 
-// const DOMAIN = 'https://fly.harmonygames.cn';
 const DOMAIN = window.g.baseUrl;
-// const DOMAIN = 'https://testapp.harmonygames.cn';
-// const DOMAIN = 'http://172.16.133.34:8000';
 const APIPATH = '/api/v1/fir/server';
 let USERSEVER = DOMAIN + APIPATH;
 

fir_client/vue.config.js

@@ -1,5 +1,6 @@
 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
 const path = require('path');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 function resolve(dir) {
     return path.join(__dirname, dir);
@@ -7,6 +8,24 @@ function resolve(dir) {
 
 const argv = process.argv;
 
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
+
+const compress = new CompressionWebpackPlugin(
+    {
+        filename: info => {
+            return `${info.path}.gz${info.query}`
+        },
+        algorithm: 'gzip',
+        threshold: 10240,
+        test: new RegExp(
+            '\\.(' +
+            ['js'].join('|') +
+            ')$'
+        ),
+        minRatio: 0.8,
+        deleteOriginalAssets: false
+    }
+);
 
 const index={
     // page 的入口
@@ -20,7 +39,7 @@ const index={
     title: 'Fly分发平台',
     // 在这个页面中包含的块，默认情况下会包含
     // 提取出来的通用 chunk 和 vendor chunk。
-    chunks: ['chunk-vendors', 'chunk-common', 'index']
+    chunks: ['chunk-vendors', 'chunk-common', 'index','chunk-libs','chunk-elementUI','chunk-commons','runtime','chunk-aliOss','chunk-qiniuJs','chunk-qrcodejs2']
 };
 const mshort={
         // page 的入口
@@ -34,7 +53,7 @@ const mshort={
         title: '应用下载',
         // 在这个页面中包含的块，默认情况下会包含
         // 提取出来的通用 chunk 和 vendor chunk。
-        chunks: ['chunk-vendors', 'chunk-common', 'mshort']
+        chunks: ['chunk-vendors', 'chunk-common', 'mshort','chunk-libs','chunk-elementUI','chunk-commons','runtime']
 };
 const short={
         // page 的入口
@@ -48,9 +67,9 @@ const short={
         title: '应用下载',
         // 在这个页面中包含的块，默认情况下会包含
         // 提取出来的通用 chunk 和 vendor chunk。
-        chunks: ['chunk-vendors', 'chunk-common', 'short']
+        chunks: ['chunk-vendors', 'chunk-common', 'short','chunk-libs','chunk-commons','runtime']
 };
-let pages = {index,short,mshort};
+let pages = {index,short};
 const page = argv[3];
 if(page){
     for(const key of Object.keys(pages)){
@@ -63,7 +82,11 @@ if(page){
 }
 module.exports = {
     pages: pages,
-    productionSourceMap: false,
+    productionSourceMap: false, //去除生产环境的productionSourceMap
+    assetsDir: "static", //静态文件存储位置
+    lintOnSave: true,
+    runtimeCompiler:true,
+    // publicPath: './',
     configureWebpack: {
         // provide the app's title in webpack's name field, so that
         // it can be accessed in index.html to inject the correct title.
@@ -72,9 +95,27 @@ module.exports = {
             alias: {
                 '@': resolve('src')
             }
-        }
+        },
+        plugins: [compress,new UglifyJsPlugin({
+            uglifyOptions: {
+                output: {
+                    comments: false, // 去掉注释
+                },
+                warnings: false,
+                compress: {
+                    drop_console: true,
+                    drop_debugger: true,
+                    pure_funcs: ['console.log']//移除console
+                }
+            }
+        })]
     },
     chainWebpack: config => {
+        if (page==='analyz') {
+            config
+                .plugin('webpack-bundle-analyzer')
+                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
+        }
 
         if (!IS_PROD) {
             config.output
@@ -91,19 +132,28 @@ module.exports = {
 
         }
 
+        // config.plugins.delete('preload');
 
-        config.optimization.splitChunks({
+        // config.optimization.splitChunks({
-            cacheGroups: {
+        //     cacheGroups: {
-                vendors: {
+        //         vendors: {
-                    name: 'chunk-vendors',
+        //             name: 'chunk-vendors',
-                    minChunks: 4,
+        //             minChunks: 4,
-                    test: /node_modules/,
+        //             test: /node_modules/,
-                    priority: -10,
+        //             priority: -10,
-                    chunks: 'initial'
+        //             chunks: 'initial'
-                },
+        //         },
-                common: {}
+        //         common: {}
-            }
+        //     }
-        });
+        // });
+
+        // config.module
+        //     .rule('images')
+        //     .use('image-webpack-loader')
+        //     .loader('image-webpack-loader')
+        //     .options({
+        //         bypassOnDebug: true
+        //     }).end();
 
         // set preserveWhitespace
         config.module
@@ -115,48 +165,63 @@ module.exports = {
                 return options
             })
             .end();
-        //
-        // config.when(!IS_PROD,
-        //         config => {
-        //             config
-        //                 .plugin('ScriptExtHtmlWebpackPlugin')
-        //                 .after('html')
-        //                 .use('script-ext-html-webpack-plugin', [{
-        //                     // `runtime` must same as runtimeChunk name. default is `runtime`
-        //                     inline: /runtime\..*\.js$/
-        //                 }])
-        //                 .end();
-        //             config
-        //                 .optimization.splitChunks({
-        //                 chunks: 'all',
-        //                 cacheGroups: {
-        //                     libs: {
-        //                         name: 'chunk-libs',
-        //                         test: /[\\/]node_modules[\\/]/,
-        //                         priority: 10,
-        //                         chunks: 'initial' // only package third parties that are initially dependent
-        //                     },
-        //                     elementUI: {
-        //                         name: 'chunk-elementUI', // split elementUI into a single package
-        //                         priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-        //                         test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-        //                     },
-        //                     commons: {
-        //                         name: 'chunk-commons',
-        //                         test: resolve('src/components'), // can customize your rules
-        //                         minChunks: 3, //  minimum common number
-        //                         priority: 5,
-        //                         reuseExistingChunk: true
-        //                     }
-        //                 }
-        //             });
-        //             config.optimization.runtimeChunk('single');
-        //
-        //         }
-        //     );
-
 
+        if(IS_PROD) {
+                    config
+                        .plugin('ScriptExtHtmlWebpackPlugin')
+                        .after('html')
+                        .use('script-ext-html-webpack-plugin', [{
+                            // `runtime` must same as runtimeChunk name. default is `runtime`
+                            inline: /runtime\..*\.js$/
+                        }])
+                        .end();
+                    config
+                        .optimization.splitChunks({
+                        chunks: 'async',
+                        minSize: 30000,  //表示在压缩前的最小模块大小,默认值是30kb
+                        minChunks: 2,  // 表示被引用次数，默认为1；
+                        maxAsyncRequests: 8,  //所有异步请求不得超过5个
+                        maxInitialRequests: 3,  //初始话并行请求不得超过3个
+                        automaticNameDelimiter:'~',//名称分隔符，默认是~
+                        name: true,  //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔
+                        cacheGroups: {
+                            libs: {
+                                name: 'chunk-libs',
+                                test: /[\\/]node_modules[\\/]/,
+                                priority: 10,
+                                chunks: 'initial' // only package third parties that are initially dependent
+                            },
+                            elementUI: {
+                                name: 'chunk-elementUI', // split elementUI into a single package
+                                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                            },
+                            aliOss: {
+                                name: 'chunk-aliOss', // split elementUI into a single package
+                                priority: 21, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                                test: /[\\/]node_modules[\\/]_?ali-oss(.*)/ // in order to adapt to cnpm
+                            },
+                            qiniuJs: {
+                                name: 'chunk-qiniuJs', // split elementUI into a single package
+                                priority: 22, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                                test: /[\\/]node_modules[\\/]_?qiniu-js(.*)/ // in order to adapt to cnpm
+                            },
+                            qrcodejs2: {
+                                name: 'chunk-qrcodejs2', // split elementUI into a single package
+                                priority: 23, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                                test: /[\\/]node_modules[\\/]_?qrcodejs2(.*)/ // in order to adapt to cnpm
+                            },
+                            commons: {
+                                name: 'chunk-commons',
+                                test: resolve(resolve('src/components')), // can customize your rules
+                                minChunks: 2, //  minimum common number
+                                priority: 5,
+                                reuseExistingChunk: true
+                            }
+                        }
+                    });
+                    config.optimization.runtimeChunk('single');
+                }
     }
-
 };