perf(ci): 优化打包分包逻辑

.env.development

@@ -5,20 +5,21 @@ VUE_APP_PUBLIC_PATH=/
 # Cross-domain proxy, you can configure multiple
 VUE_APP_PROXY=[["/app","http://localhost:3000"]]
 
+# Basic interface address SPA
+GLOB_API_URL=/app
+
+# Interface prefix
+GLOB_API_URL_PREFIX=
+
+
 # Whether to use cache for development TRUE or FALSE
 VUE_APP_USE_CACHE=FALSE
 
 # Development environment supports ie environment TRUE or FALSE
-VUE_APP_SUPPORT_IE=TRUE
+VUE_APP_SUPPORT_IE=FALSE
 
 # Whether to open the mock TRUE or FALSE
 VUE_APP_USE_MOCK=TRUE
 
 # Use the theme switching function
 VUE_APP_USE_THEME_REPLACER=FALSE
-
-# Basic interface address SPA
-GLOB_API_URL=/app
-
-# Interface prefix
-GLOB_API_URL_PREFIX=/v1.0

.env.production

@@ -28,4 +28,4 @@ VUE_APP_USE_CDN=FALSE
 GLOB_API_URL=/app
 
 # Interface prefix
-GLOB_API_URL_PREFIX=/v1.0
+GLOB_API_URL_PREFIX=

config/vue/devServer.js

@@ -44,7 +44,7 @@ function createDevServer() {
     compress: true,
     clientLogLevel: 'warn',
     overlay: {
-      warnings: true,
+      warnings: false,
       errors: true,
     },
     before: (app) => {

config/vue/index.js

@@ -46,6 +46,9 @@ function createVueConfig() {
     css: createCss(isProd),
     configureWebpack: (config) => {
       config.resolve.extensions = ['.js', '.jsx', '.tsx', '.ts'];
+      config.stats = {
+        warningsFilter: /.*/,
+      };
       configEntry(config);
     },
     chainWebpack: (config) => {

config/vue/optimization.js

@@ -15,7 +15,8 @@ const resolve = require('../../build/getCwdPath');
 // }
 
 function configOptimization(config) {
-  config.when(isProductionFn(), (config) => {
+  // 只为方便注释  true｜｜ 这样写没意义
+  config.when(true || isProductionFn(), (config) => {
     // createScriptExtPlugin(config);
 
     config.optimization.runtimeChunk({
@@ -69,7 +70,7 @@ function configOptimization(config) {
         commons: {
           name: 'commons.chunk',
           test: resolve('src/components'),
-          minChunks: 3,
+          minChunks: 2,
           priority: 20,
           reuseExistingChunk: true,
         },
@@ -107,7 +108,6 @@ function configOptimization(config) {
             } else if (
               packageName.indexOf('echarts') !== -1 ||
               packageName.indexOf('zrender') !== -1 ||
-              packageName.indexOf('apexcharts') !== -1 ||
               packageName.indexOf('vue-baidu-map') !== -1
             ) {
               packageName = 'chart';

config/vue/plugins/ignore.js

@@ -3,6 +3,13 @@ const { isProductionFn } = require('../../../build/utils');
 
 module.exports = {
   configIgnorePlugin(config) {
+    config.plugin('ignore').use(
+      new webpack.ContextReplacementPlugin(/\/request\//, (data) => {
+        delete data.dependencies[0].critical;
+        return data;
+      })
+    );
+
     config.when(isProductionFn(), (config) => {
       config.plugin('ignore').use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
     });

config/vue/plugins/report.js

@@ -3,7 +3,7 @@ function createReport(config) {
   config.when(process.env.REPORT, (config) => {
     config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin.BundleAnalyzerPlugin, [
       {
-        analyzerPort: 8888,
+        analyzerPort: 10010,
         generateStatsFile: false,
       },
     ]);

mock/demo/table-demo.js

@@ -16,7 +16,7 @@ const demoList = Mock.mock({
 });
 
 module.exports = {
-  'GET /v1.0/table/getDemoList 500': ({ query }) => {
+  'GET /table/getDemoList 500': ({ query }) => {
     const { page = 1, pageSize = 20 } = query;
     const demoListItems = demoList.items;
     const pageData = ResultUtil.pagination(page, pageSize, demoListItems);

mock/sys/menu.js

@@ -124,13 +124,13 @@ const fakeCodeList = {
   2: ['10010', '20020', '30030'],
 };
 module.exports = {
-  'GET /v1.0/getMenuListByUserId 20': ({ query }) => {
+  'GET /getMenuListByUserId 20': ({ query }) => {
     const { userId } = query;
     return ResultUtil.success(userId ? fakeList[~~userId] || {} : {});
   },
 
   // 根据用户id获取按钮权限code
-  'GET /v1.0/getBtnCodeListByUserId 20': ({ query }) => {
+  'GET /getBtnCodeListByUserId 20': ({ query }) => {
     const { userId } = query;
     return ResultUtil.success(userId ? fakeCodeList[~~userId] || {} : {});
   },

mock/sys/user.js

@@ -54,7 +54,7 @@ module.exports = {
       desc,
     });
   },
-  'GET /v1.0/getUserInfoById 300': ({ query }) => {
+  'GET /getUserInfoById 300': ({ query }) => {
     const { userId } = query;
     const checkUser = getFakeUserList().find((item) => item.userId === userId);
 

src/api/sys/user.ts

@@ -15,17 +15,11 @@ enum Api {
  * @description: 用户登陆
  */
 export function loginApi(params: LoginParams) {
-  return http.request<LoginResultModel>(
-    {
-      url: Api.Login,
-      method: 'POST',
-      params,
-    },
-    {
-      // 登陆接口不加 /v1.0
-      joinPrefix: false,
-    }
-  );
+  return http.request<LoginResultModel>({
+    url: Api.Login,
+    method: 'POST',
+    params,
+  });
 }
 
 /**

src/common/factory/getLazyComponent.ts

@@ -3,5 +3,8 @@
  */
 
 export function getLazyComponent(path: string) {
-  return () => Promise.resolve(require(`@/views/${path}.vue`).default);
+  // !开发环境会有警告，如果不想显示警告，可以注释掉，用下面的方式，但是打包的时候这里需要还原
+  return () => import(`@/views/${path}.vue`);
+
+  // return () => Promise.resolve(require(`@/views/${path}.vue`).default);
 }

src/components/form/src/componentMap.ts

@@ -16,7 +16,7 @@ import {
   TreeSelect,
   Transfer,
 } from 'ant-design-vue';
-import { StrengthMeter } from '@/components/strength-meter/index';
+// import { StrengthMeter } from '@/components/strength-meter/index';
 
 import { ComponentType } from './types/index';
 
@@ -48,7 +48,7 @@ componentMap.set('MonthPicker', DatePicker.MonthPicker);
 componentMap.set('RangePicker', DatePicker.RangePicker);
 componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
-componentMap.set('StrengthMeter', StrengthMeter);
+// componentMap.set('StrengthMeter', StrengthMeter);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

src/utils/http/axios/index.ts

@@ -55,10 +55,11 @@ const transform: AxiosTransform = {
   transformRequestData: (res: AxiosResponse<Result>, options: RequestOptions) => {
     const { isTransformRequestResult } = options;
     // 不进行任何处理，直接返回
+    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
     if (!isTransformRequestResult) {
       return res.data;
     }
-
+    // 错误的时候返回
     const errorResult = undefined;
 
     const { data } = res;
@@ -66,11 +67,14 @@ const transform: AxiosTransform = {
       // return '[HTTP] Request has no return value';
       return errorResult;
     }
+    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
     const { code, result, message } = data;
 
+    // 这里逻辑可以根据项目进行修改
     const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
     if (!hasSuccess) {
       if (message) {
+        // errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
         if (options.errorMessageMode === 'modal') {
           createErrorModal({ title: '错误提示', content: message });
         } else {
@@ -81,9 +85,11 @@ const transform: AxiosTransform = {
       return errorResult;
     }
 
+    // 接口请求成功，直接返回结果
     if (code === ResultEnum.SUCCESS) {
       return result;
     }
+    // 接口请求错误，统一提示错误信息
     if (code === ResultEnum.ERROR) {
       if (message) {
         createMessage.error(data.message);

src/views/dashboard/analysis/components/AnalysisBar.vue

@@ -73,6 +73,7 @@
           ],
         });
       });
+
       return () => {
         const { width, height } = props;
         return <div ref={chartRef} style={{ height: height, width: width }} />;