chore: postcss移除,按需加载修改

internals/webpack/config/cssRules.js

@@ -80,26 +80,26 @@ export async function addCSSRules(opts) {
           ...userConfig.cssLoader,
         });
 
-      rule
-        .use('postcss-loader')
-        .loader(require.resolve('@umijs/bundler-webpack/compiled/postcss-loader'))
-        .options({
-          postcssOptions: {
-            ident: 'postcss',
-            plugins: [
-              require('../compiled/postcss-flexbugs-fixes'),
-              require('postcss-preset-env')({
-                browsers: opts.browsers,
-                autoprefixer: {
-                  flexbox: 'no-2009',
-                  ...userConfig.autoprefixer,
-                },
-                stage: 3,
-              }),
-            ].concat(userConfig.extraPostCSSPlugins || []),
-            ...userConfig.postcssLoader,
-          },
-        });
+      // rule
+      //   .use('postcss-loader')
+      //   .loader(require.resolve('@umijs/bundler-webpack/compiled/postcss-loader'))
+      //   .options({
+      //     postcssOptions: {
+      //       ident: 'postcss',
+      //       plugins: [
+      //         require('../compiled/postcss-flexbugs-fixes'),
+      //         require('postcss-preset-env')({
+      //           browsers: opts.browsers,
+      //           autoprefixer: {
+      //             flexbox: 'no-2009',
+      //             ...userConfig.autoprefixer,
+      //           },
+      //           stage: 3,
+      //         }),
+      //       ].concat(userConfig.extraPostCSSPlugins || []),
+      //       ...userConfig.postcssLoader,
+      //     },
+      //   });
 
       if (loader) {
         rule

internals/webpack/css.js

@@ -70,30 +70,30 @@ function createCSSRule({
                   ),
               );
           
-          rule
-              .use('postcss-loader')
-              .loader(require.resolve('postcss-loader'))
-              .options(
-                deepmerge(
-                  {
-                    ident: 'postcss',
-                    plugins: () => [
-                      require('postcss-flexbugs-fixes'),
-                      require('postcss-preset-env')({
-                        // TODO: set browsers
-                        autoprefixer: {
-                          ...config.autoprefixer,
-                          overrideBrowserslist: browserslist,
-                        },
-                        // https://cssdb.org/
-                        stage: 3,
-                      }),
-                      ...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : []),
-                    ],
-                  },
-                  config.postcssLoader || {},
-                ),
-              );
+          // rule
+          //     .use('postcss-loader')
+          //     .loader(require.resolve('postcss-loader'))
+          //     .options(
+          //       deepmerge(
+          //         {
+          //           ident: 'postcss',
+          //           plugins: () => [
+          //             require('postcss-flexbugs-fixes'),
+          //             require('postcss-preset-env')({
+          //               // TODO: set browsers
+          //               autoprefixer: {
+          //                 ...config.autoprefixer,
+          //                 overrideBrowserslist: browserslist,
+          //               },
+          //               // https://cssdb.org/
+          //               stage: 3,
+          //             }),
+          //             ...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : []),
+          //           ],
+          //         },
+          //         config.postcssLoader || {},
+          //       ),
+          //     );
       
           if (loader) {
             rule

internals/webpack/webpack.prod.babel.js

@@ -60,7 +60,7 @@ module.exports = require('./webpack.base.babel')({
           name(module) {
             const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
             // @ts-ignore
-            if (module.type !== 'css/mini-extract') {
+            if (['@wisdom-components', 'swiper'].indexOf(packageName) === -1) {
               return `npm.${packageName.replace('@', '')}`;
             }
           },

package.json

@@ -102,7 +102,7 @@
         "@ant-design/pro-layout": "^6.24.1",
         "@ant-design/pro-list": "1.21.71",
         "@ant-design/pro-skeleton": "^1.0.0-beta.2",
-        "@ant-design/pro-table": "2.76.4",
+        "@ant-design/pro-table": "2.77.1",
         "@ant-design/pro-utils": "^1.10.4",
         "@babel/polyfill": "7.4.3",
         "@babel/runtime": "^7.10.5",
@@ -112,9 +112,9 @@
         "@wisdom-components/basictable": "^1.5.16",
         "@wisdom-components/empty": "^1.4.1",
         "@wisdom-components/videoslidermodal": "^1.1.60",
-        "@wisdom-map/amap": "1.9.0",
-        "@wisdom-map/arcgismap": "1.4.0-338",
-        "@wisdom-map/basemap": "1.1.0-45",
+        "@wisdom-map/amap": "2.0.0",
+        "@wisdom-map/arcgismap": "2.0.5",
+        "@wisdom-map/basemap": "2.0.0",
         "@wisdom-map/util": "1.2.9",
         "@wisdom-utils/components": "0.1.364",
         "@wisdom-utils/runtime": "0.0.51",
@@ -270,11 +270,6 @@
         "ora": "^5.1.0",
         "path-to-regexp": "^2.4.0",
         "plop": "2.3.0",
-        "postcss": "7.0.32",
-        "postcss-flexbugs-fixes": "4.2.1",
-        "postcss-loader": "3.0.0",
-        "postcss-preset-env": "6.7.0",
-        "postcss-safe-parser": "^4.0.2",
         "pre-commit": "1.2.2",
         "prettier": "1.17.0",
         "querystring-browser": "^1.0.4",

src/components/GlobalHeader/NoticeIconView.js

-import React, { Component, useMemo, useState } from 'react';
+import React, { Component, lazy, Suspense, useMemo, useState } from 'react';
 
 import { Button, Form, Input, Modal, notification, Pagination } from 'antd';
 import { connect } from 'react-redux';
@@ -8,7 +8,6 @@ import { findPathByWidget, isJSON } from '@wisdom-utils/components/lib/AppLayout
 import classNames from 'classnames';
 import { appService } from '@/api';
 import { getVideoUrl } from '@/utils/utils';
-import VideoSliderModal from '@wisdom-components/videoslidermodal';
 import Notifier from '../../layouts/AppLayout/notifier/notice';
 import NoticeIcon from '../../layouts/AppLayout/notifier';
 import { ERR_OK, MESSAGE_TYPE, NEW_MESSAGE } from '../../layouts/AppLayout/notifier/constants';
@@ -18,6 +17,7 @@ import isProd from '../../utils/env';
 import { getMessageTypeIcon } from '../../layouts/AppLayout/notifier/utils';
 // import NoticeIcon from '../NoticeIcon';
 import styles from './index.less';
+const VideoSliderModal = lazy(() => import('@wisdom-components/videoslidermodal'));
 const { TextArea } = Input;
 
 const jessibucaObj = {
@@ -476,19 +476,21 @@ class NoticeIconView extends Component {
         }
 
         {this.state.videoVisible && this.state.videoMessage?.list?.length && (
-          <VideoSliderModal
-            modalInfo={{
-              title: this.state.videoMessage.title,
-              open: this.state.videoVisible,
-              visible:this.state.videoVisible,
-              className:'noticeVideoModal',
-              onCancel: () => {
-                this.handleCloseVideo()
-              },
-            }}
-            videoInfos={this.state.videoMessage.list}
-            JessibucaObj={jessibucaObj}
-          />
+          <Suspense fallback={<></>}>
+            <VideoSliderModal
+              modalInfo={{
+                title: this.state.videoMessage.title,
+                open: this.state.videoVisible,
+                visible:this.state.videoVisible,
+                className:'noticeVideoModal',
+                onCancel: () => {
+                  this.handleCloseVideo()
+                },
+              }}
+              videoInfos={this.state.videoMessage.list}
+              JessibucaObj={jessibucaObj}
+            />
+          </Suspense>
         )}
 
         {this.state.sysTopVisible && this.state.sysMessage && !this.props.global.isNewYear && (

src/components/MapView/index.js

-// eslint-disable-next-line import/extensions
-import React from 'react';
-// eslint-disable-next-line import/extensions
-import { ArcGISMap as MapComponent } from '@wisdom-map/arcgismap';
-// import MapComponent from './lib/index.js';
-
-// eslint-disable-next-line react/prefer-stateless-function
-export default class ArcGISMap extends React.Component {
-  render() {
-    return <MapComponent {...this.props} />;
-  }
-}

src/components/MapView/index.less

-@import '~antd/es/style/themes/variable.less';
-
-.view {
-    position: absolute;
-    top:0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    .loadingBox{
-        position: absolute;
-        left: calc(50% - 40px);
-        top: calc(50% - 23px);
-        color: @text-color;
-    }
-    .mapBox {
-      width: 100%; 
-      height: 100%;
-    }
-
-}

src/layouts/BasicLayout.js

@@ -40,9 +40,6 @@ import SoundAi from '../components/SoundAi';
 
 const { params } = helpers;
 let notify = null;
-// const ArcgisMap = React.lazy(() => import('../pages/map/arcgis'));
-// const AMap = React.lazy(() => import('../pages/map/amap'));
-// const CesiumMap = React.lazy(() => import('../pages/map/cesiumMap'));
 
 const waitTime = (time = 100) =>
   new Promise(resolve => {

src/pages/cloud/analysis/using/index.js

 /**
  * 云平台使用分析
  */
-import React, { useCallback, useEffect, useState, useRef } from 'react';
+import React, { useCallback, useEffect, useState, useRef, Suspense, lazy } from 'react';
 import { connect } from 'react-redux';
 import {
   Card,
@@ -18,17 +18,17 @@ import {
   ConfigProvider,
   notification,
 } from 'antd';
-import ReactECharts from 'echarts-for-react';
 import zhCN from 'antd/lib/locale/zh_CN';
 import { LeftOutlined } from '@ant-design/icons';
 import { cloudService } from '@/api';
 import SecurityLayout from '@/layouts/SecurityLayout';
 import Basictable from '@wisdom-components/basictable';
 import { actionCreators } from '@/containers/App/store';
-import styles from './index.less';
 import _ from 'lodash';
 import moment from 'moment';
+import styles from './index.less';
 
+const ReactECharts = lazy(() => import('echarts-for-react'));
 const dateForModel = (model, date = moment()) => {
   let result = { dateFrom: null, dateTo: null };
   switch (model) {
@@ -1524,15 +1524,17 @@ const CloudUsingAnalysis = () => {
                     </div>
                     <div className="cua-chart-content">
                       {loginsOption ? (
-                        <ReactECharts
-                          className="po-type-hour-chart"
-                          style={{ width: '100%', height: '100%' }}
-                          opts={{ renderer: 'svg' }}
-                          option={loginsOption}
-                          onEvents={{
-                            click: showLoginDetails,
-                          }}
-                        />
+                        <Suspense fallback={<></>}>
+                          <ReactECharts
+                            className="po-type-hour-chart"
+                            style={{ width: '100%', height: '100%' }}
+                            opts={{ renderer: 'svg' }}
+                            option={loginsOption}
+                            onEvents={{
+                              click: showLoginDetails,
+                            }}
+                          />
+                        </Suspense>
                       ) : null}
                     </div>
                   </div>
@@ -1560,15 +1562,17 @@ const CloudUsingAnalysis = () => {
                     </div>
                     <div className="cua-chart-content">
                       {industryOption ? (
-                        <ReactECharts
-                          className="po-type-hour-chart"
-                          style={{ width: '100%', height: '100%' }}
-                          opts={{ renderer: 'svg' }}
-                          option={industryOption}
-                          onEvents={{
-                            click: showIndustryLevel,
-                          }}
-                        />
+                        <Suspense fallback={<></>}>
+                          <ReactECharts
+                            className="po-type-hour-chart"
+                            style={{ width: '100%', height: '100%' }}
+                            opts={{ renderer: 'svg' }}
+                            option={industryOption}
+                            onEvents={{
+                              click: showIndustryLevel,
+                            }}
+                          />
+                        </Suspense>
                       ) : null}
                     </div>
                   </div>
@@ -1578,12 +1582,14 @@ const CloudUsingAnalysis = () => {
                     </div>
                     <div className="cua-chart-content">
                       {hotsOption ? (
-                        <ReactECharts
-                          className="po-type-hour-chart"
-                          style={{ width: '100%', height: '100%' }}
-                          opts={{ renderer: 'svg' }}
-                          option={hotsOption}
-                        />
+                        <Suspense fallback={<></>}>
+                          <ReactECharts
+                            className="po-type-hour-chart"
+                            style={{ width: '100%', height: '100%' }}
+                            opts={{ renderer: 'svg' }}
+                            option={hotsOption}
+                          />
+                        </Suspense>
                       ) : null}
                     </div>
                   </div>
@@ -1616,12 +1622,14 @@ const CloudUsingAnalysis = () => {
                     </div>
                     <div className="cua-chart-content">
                       {productsOption ? (
-                        <ReactECharts
-                          className="po-type-hour-chart"
-                          style={{ width: '100%', height: '100%' }}
-                          opts={{ renderer: 'svg' }}
-                          option={productsOption}
-                        />
+                        <Suspense fallback={<></>}>
+                          <ReactECharts
+                            className="po-type-hour-chart"
+                            style={{ width: '100%', height: '100%' }}
+                            opts={{ renderer: 'svg' }}
+                            option={productsOption}
+                          />
+                        </Suspense>
                       ) : null}
                     </div>
                   </div>

src/pages/map/amap/config.js

-const mapSetting = {
-  zooms: [14],
-  mapSettings: {
-    mapStyle: 'amap://styles/74fae00a851749793870b658f9f22d55',
-    pipeStyle: 'image',
-    viewMode: '2D',
-  },
-  propertysName: ['所在位置', '开关状态', '编号', '口径'],
-  showSearchFileds: ['开关状态', '编号', '口径'],
-  showFileds: ['编号'],
-  contextMenu: true,
-  theme: 'dark',
-  radius: 120,
-  isEdit: false,
-};
-
-export default mapSetting;

src/pages/map/amap/index.js

-import React from 'react';
-import { AMapScene } from '@wisdom-map/amap';
-import { connect } from 'react-redux';
-import { store } from '@wisdom-utils/utils';
-import { actionCreators } from '../../../containers/App/store';
-
-const AMap = props => {
-  const getMap = (obj, current) => {
-    store.set('amapView', {
-      Amap: obj,
-      map: current,
-    });
-    props.updageAMapView({
-      Amap: obj,
-      map: current,
-    });
-  };
-
-  const mapOptions = {
-    config: window.globalConfig.mapsettings,
-    theme: 'amap://styles/74fae00a851749793870b658f9f22d55',
-    mapOptions: {
-      plugins: ['AMap.MarkerClusterer'],
-    },
-  };
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      }}
-    >
-      <AMapScene {...mapOptions} getMapInfo={getMap} />
-    </div>
-  );
-};
-const mapStateToProps = state => ({
-  global: state.getIn(['global', 'globalConfig']),
-  amapView: state.getIn(['global', 'amapView']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  updageAMapView(amapView) {
-    // eslint-disable-next-line no-undef
-    dispatch(actionCreators.updageAMapView(amapView));
-  },
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(AMap);

src/pages/map/arcgis/index.js

-import React from 'react';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import AMapLoader from '@amap/amap-jsapi-loader';
-import { store } from '@wisdom-utils/utils';
-import { actionCreators } from '@/containers/App/store';
-import MapComponent from '@/components/MapView';
-class CreateMap extends React.Component {
-  constructor(props) {
-    super(props);
-    this.mapManganerRef = React.createRef();
-    [
-      '_AMap_vectorlayer',
-      '_AMap_AMap.MouseTool',
-      '_AMap_AMap.DistrictSearch',
-      '_AMap_AMap.Autocomplete',
-      '_AMap_sync',
-      '_AMap_AMap.PlaceSearch',
-      '_AMap_wgl',
-      '_AMap_overlay',
-      '_AMap_mouse',
-    ].forEach(item => {
-      localStorage.removeItem(item);
-    });
-    AMapLoader.reset();
-  }
-
-  getView = view => {
-    store.set('view', view);
-    this.props.updageMapView(view);
-  };
-
-  render() {
-    if (_.isNull(this.props.global.mapsettings.areasettings)) {
-      return null;
-    }
-
-    const props = {
-      loading: true,
-      config: this.props.global.mapsettings,
-      widgets: this.props.global.uiwidgets,
-    };
-
-    return (
-      <>
-        <MapComponent {...props} getMapInfo={this.getView} />
-      </>
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  global: state.getIn(['global', 'globalConfig']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  updageMapView(mapView) {
-    dispatch(actionCreators.updageMapView(mapView));
-  },
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(CreateMap);

src/pages/map/index.js

-import ArcgisMap from './arcgis';
-import AMap from './amap';
-export { ArcgisMap, AMap };