2020年11月07日(react项目配置)

react项目配置

之前分环境打包部署在package.json里配置，都没有问题，今天部署的时候居然发现没生效，然后直接用他的内置环境变量获取

之前：

之后：

但是发现好多人都会用到cross-env，那他的优点是什么？
不同平台使用唯一指令，无需担心跨平台问题

部署之后，发现我没点击一个页面都要加载很久，打包之后的请求的一个js有二十几M,于是做了代码分割，也可以压缩

我是用的是react-app-rewired，于是在config-overrides.js里配置

const code_slicing = () => (config) => {
  config.devtool = false
  config.optimization = {
    splitChunks: {
      cacheGroups: {
        earth: {
          chunks: 'all',
          priority: 1,
          test: /[\\/]node_modules[\\/]xt-earth[\\/]/,
          name: 'Earth',
          minSize: 0,
          minChunks: 1
        },
        editor: {
          chunks: 'all',
          priority: 1,
          test: /[\\/]node_modules[\\/]monaco-editor[\\/]/,
          name: 'Editor',
          minSize: 0,
          minChunks: 1
        },
        echarts: {
          chunks: 'all',
          priority: 1,
          test: /(echarts|echarts-for-react|echarts-gl)/,
          name: 'Echarts',
          minSize: 0,
          minChunks: 1
        },
        babel: {
          chunks: 'all',
          priority: 1,
          test: /[\\/]node_modules[\\/]@babel[\\/]/,
          name: 'Babel',
          minSize: 0,
          minChunks: 1
        }
      }
    }
  }
  return config
}