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()
);