React打包去掉.map文件的幾種方式
網(wǎng)上常見(jiàn)的方法有四種
方法一: 直接修改配置文件
- 在node_modules文件夾中找到react-scripts包路徑/node_modules/react-scripts/config/webpack.config.prod.js
- 找到const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';將這一行代碼注釋
- 在下面添加一行 const shouldUseSourceMap = false;
- 重啟終端，重新打包
// const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldUseSourceMap = false ;
image-20201028222415979
生成文件如下圖:
image-20201028222540412
方法二: 使用react-app-rewired,并配置
module.exports = function override(config, env) {
// 添加一行這個(gè)代碼,關(guān)閉
config.devtool = false
}
注意點(diǎn):
如果使用了react-app-rewired,那么要注意版本是1.6.+,
-
修改devtool=false,只會(huì)將.js.map文件刪除
image-20201028223219678
方式三: 修改生產(chǎn)環(huán)境的打包指令
- 安裝cross-env
yarn add cross-env
- 修改package.json中的scripts區(qū)域的代碼
"scripts": {
"start": "react-app-rewired start",
// 生產(chǎn)環(huán)境寫下 cross-env GENERATE_SOURCEMAP=false
"build": "cross-env GENERATE_SOURCEMAP=false react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
- 再次執(zhí)行yarn build,你會(huì)發(fā)現(xiàn)很神奇事情
image-20201029060809328
方式四:添加.env文件修改變量
1.在根目錄下創(chuàng)建 .env文件
2.里面寫入
GENERATE_SOURCEMAP = false
3.執(zhí)行yarn build
image-20210104192342365
tips:
yarn eject 項(xiàng)目后發(fā)現(xiàn)了 react 會(huì)加載根目錄下的.env文件
image-20210104192840462
env.js
image-20210104193510207
如果我們要定義變量 必須通過(guò) REACT_APP_XXXX = xxx 形式,因?yàn)榧虞d時(shí)候進(jìn)行了正則表達(dá)式的匹配
image-20210104192742188
總結(jié)
- 生產(chǎn)環(huán)境時(shí),遇到要把.map文件去掉,方式一要修改node_modules包中的文件比較麻煩,如果經(jīng)常去刪除node_modules,那么你就要經(jīng)常去修改里面的文件,十分繁瑣
- 方式二只能取出.js.map的文件,并不能取出.css.map文件
- 方式三也是查詢資料找到了,簡(jiǎn)單修改了scripts標(biāo)簽中打包生產(chǎn)環(huán)境的指令就可以實(shí)現(xiàn)了，更加簡(jiǎn)單方便。
- 方法四(推薦),感謝大佬的留言
??有更好的方案歡迎留言
