umi config

import { resolve } from 'path'
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const fs = require('fs')
const path = require('path')
const lessToJs = require('less-vars-to-js')
const IS_PROD = process.env.NODE_ENV !== 'development' // 是否为生产环境
export default {
  // 用户配置 sourcemap 类型。
  // 常见的可选类型有：
  // eval，最快的类型，但不支持低版本浏览器，如果编译慢，可以试试
  // source-map，最慢最全的类型
  devtool: IS_PROD ? false : 'eval',
  hash: true,
  ignoreMomentLocale: true, // 打包的时候忽略moment的语种，未忽略前600k+
  nodeModulesTransform: { // 编译不编译nodeModules
    type: 'none',
    exclude: [],
  },
  title: '中台系统', // 系统名称
  antd: {}, // 启用UMI自带的antd
  // 页面head中的属性设置，例如：不缓存
  metas: [
    {
      httpEquiv: 'Cache-Control',
      content: 'no-cache',
    },
    {
      httpEquiv: 'Pragma',
      content: 'no-cache',
    },
    {
      httpEquiv: 'google', // 禁止浏览器翻译，多语言系统，如果中文翻译为简体会有问题
      content: 'notranslate',
    }
  ],
  // 是否启用按需加载，即是否把构建产物进行拆分，在需要的时候下载额外的 JS 再执行。
  dynamicImport: {},
  // 系统主题色，/themes/default.less中可以自定义
  theme: lessToJs(
    fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
  ),
  // 请求代理
  proxy: {
    '/api': {
      target: 'http://110..', // develop
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    },
  },
  // 配置别名，对引用路径进行映射。
  alias: {
    //使用方法 import { DpLoading } from 'components'
    components: resolve(__dirname, './src/components'),
  },
  // 配置额外的 babel 插件集。
  extraBabelPresets: ['@lingui/babel-preset-react'],
  // 配置额外的 babel 插件。
  extraBabelPlugins: [
    [
      'import', // 引入lodash
      {
        libraryName: 'lodash',
        libraryDirectory: '',
        camel2DashComponentName: false,
      },
      'lodash',
    ],
    IS_PROD ? 'transform-remove-console' : '' // 生产关闭打印
  ],
  // 设置模块可以不被打包，通过 <script> 或其他方式引入，通常需要和 scripts 或 headScripts 配置同时使用。
  externals: {
    'react': 'window.React',
    'react-dom': 'window.ReactDOM',
  },
  scripts: process.env.NODE_ENV === 'development' ? [
    'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js',
    'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js',
  ] : [
    'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js',
    'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.production.min.js',
  ],
  // 默认是 ['umi']，umi.js 之前加载 vendors.js。
  chunks: ['vendors', 'umi'],
  //API 修改 webpack 配置
  chainWebpack: function(config, { webpack }) {
    config.merge({
      optimization: {
        splitChunks: {
          minSize: 30000,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          cacheGroups: {
            react: {
              name: 'react',
              priority: 20,
              test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router|react-dnd|react-adsense|react-countup|react-dnd-html5-backend|react-helmet|react-perfect-scrollbar|react-scripts|react-sortable-hoc｜lodash|lodash-decorators|redux-saga|re-select|dva|moment)[\\/]/,
            },
            antd: {
              name: 'antd', 
              priority: 20,
              test: /[\\/]node_modules[\\/](antd|@ant-design\/icons|@ant-design\/compatible)[\\/]/,
            },
            draftjs: {
              name: 'draftjs',
              priority: 20,
              test: /[\\/]node_modules[\\/](draftjs-to-html|draftjs-to-markdown)[\\/]/,
            },
            vendor: {
              name: 'vendors',
              test({ resource }) {
                return /[\\/]node_modules[\\/]/.test(resource);
              },
              priority: 10,
            },
            async: {
              chunks: 'async',
              minChunks: 2,
              name: 'async',
              maxInitialRequests: 1,
              minSize: 0,
              priority: 5,
              reuseExistingChunk: true,
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true
            }
          }
        }
      }
    })
    // 开启前端Gzip压缩，在本地不用压缩
    if (IS_PROD) {
      config.plugin('compression-webpack-plugin').use(CompressionPlugin, [{
        filename: '[path][base].gz',
        algorithm: 'gzip',
        minRatio: 0.8,
        test: productionGzipExtensions, //匹配文件名
        threshold: 10240, //对超过10k的数据压缩
        deleteOriginalAssets: false, //是否删除源文件
      }]);
    }
  },
  // 补丁很多的话会导致编译加载很慢 ---- 生产需要关闭，否则可能导致某些浏览器加载有问题
  targets: { // 减少补丁
    chrome: 79,
    firefox: false,
    safari: false,
    edge: false,
    ios: false,
  },
  // 开启esbuild压缩器，提高编译速度
  esbuild: {},
  // 开启analyze模式，用于分析，模块的打包大小等，命令行运行：yarn analyze
  analyze: {
    analyzerMode: 'server',
    analyzerPort: 8000,
    openAnalyzer: true,
    // generate stats file while ANALYZE_DUMP exist
    generateStatsFile: false,
    statsFilename: 'stats.json',
    logLevel: 'info',
    defaultSizes: 'gzip', // stat  // gzip
  }
}