01-react随记-打包去掉.map文件的几种方式

React打包去掉.map文件的几种方式

网上常见的方法有四种

方法一: 直接修改配置文件

  • 在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 ;
    

    方法二: 使用react-app-rewired,并配置

    module.exports = function override(config, env) {
        // 添加一行这个代码,关闭
        config.devtool = false
    
  • 如果使用了react-app-rewired,那么要注意版本是1.6.+,

  • 修改devtool=false,只会将.js.map文件删除

     "scripts": {
        "start": "react-app-rewired start",
        // 生产环境写下 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"
    
  • 再次执行yarn build,你会发现很神奇事情
  • 生产环境时,遇到要把.map文件去掉,方式一要修改node_modules包中的文件比较麻烦,如果经常去删除node_modules,那么你就要经常去修改里面的文件,十分繁琐
  • 方式二只能取出.js.map的文件,并不能取出.css.map文件
  • 方式三也是查询资料找到了,简单修改了scripts标签中打包生产环境的指令就可以实现了,更加简单方便。