什么时候create-react-app会混淆或缩小代码？

 

React在构建期间缩小代码并生成源映射。JS最终被认为是缩小产品的副产品，而不是因为保密。这样，最终用户能够比不缩小脚本更快地加载脚本，并且当您（或他们）打开开发人员工具时，您（以及其他所有人）可以浏览原始代码。

如果您build/static/js在构建后查看目录，则有成对.js和.map文件。JS文件随您的网站一起加载，并且.map在打开Developer Tools时按需加载文件。

要禁用源代码生成，请在GENERATE_SOURCEMAP环境变量设置为的情况下运行构建false。

GENERATE_SOURCEMAP=false npm run build

要么

GENERATE_SOURCEMAP=false yarn build

或者将其作为build脚本的一部分package.json

 {
    …
    "scripts": {
      …
-     "build": "react-scripts build"
+     "build": "GENERATE_SOURCEMAP=false react-scripts build"
    }
  }

我们在build项目的时候，js和css会自动生成.map文件，主要是用来让我们定位代码错误的，但是在生产的时候就不要了，不然这样可以通过chrome浏览器的sources看到我们的源码，这就不美丽了，解决办法：

一：直接删除.map文件即可

二：通过修改配置文件改掉自动生成（建议大家测试环境的时候不要关闭，这样有利于定位查找代码错误的位置，到发布生产的时候再关闭），现在的cli都已经没有了配置文件，所以我们这样来找：

1：首先到根目录下找到package.json， 里边看到build的时候用的是

“build”: “react-scripts build”

2：然后去找到：node_module/react-scripts/config/webpack.config.js

搜索

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; 

大概39行，替换为：

const shouldUseSourceMap = false; 

、使用react-app-rewired，

安装这个工具后，在项目根目录中新建文件config-overrides.js文件。此时我们便可以在其中进行各种webpack的骚操作了~

但是！react-app-rewired2.x以后，不再支持injectBabelPlugin的方式，需要安装customize-cra。

具体的，ant design官方文档已经给出了最新的解决方案。请前往详览。https://ant.design/docs/react/use-with-create-react-app-cn

这种方式就是我们推荐的方式。因为无需生成更多额外的文件，同时配置又趋于更简单可控的方式。

接下来我们就来具体说一下操作步骤。

首先，我们安装react-app-rewired。

$ yarn add react-app-rewired

然后修改package.json文件如下，

 

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

 

打包后我们会发现静态文件夹中会有很多的css和js的map文件，那么我们该怎么关闭sourcemap呢？

找到react-app-rewired文件下的config-overrides.js文件

/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

 

ok，再次执行npm run build便不会产生map文件了。

还看到一种解决的方式如下，

 

const rewiredMap = () => config => {
    config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    return config;
};

module.exports = override(
    // 关闭mapSource
    rewiredMap()
);