如何运行create-react-app构建版本？解决调试版启动问题

这个问题我之前也碰到过，核心原因是**yarn start本身就是专门用来启动开发调试模式的命令**，不管你在哪个目录执行它，它都会加载项目的未打包源码，开启热更新、source map等开发特性，和build生成的优化产物完全没关系。

要运行build后的优化版本，你需要用静态文件服务器来托管build文件夹里的内容，这里给你几种常用的方法：

方法一：使用官方推荐的serve工具 #

这是create-react-app官方文档里推荐的方案，操作最简单：

• 首先全局安装serve工具：

  npm install -g serve
  # 或者用yarn
  yarn global add serve
  

• 回到你的项目根目录，执行以下命令启动服务器（它会自动托管build文件夹）：

  serve -s build
  

  执行后你会看到类似提示，访问对应的地址就能看到优化后的生产版本了：

  Serving!

  • Local: http://localhost:3000
  • On Your Network: http://192.168.x.x:3000

方法二：使用http-server工具 #

如果你更习惯用http-server，步骤也类似：

• 全局安装工具：

  npm install -g http-server
  # 或者yarn
  yarn global add http-server
  

• 进入build目录或者在项目根目录执行：

  http-server build
  # 可以指定端口，比如3000
  http-server build -p 3000
  

方法三：在项目内添加本地脚本（无需全局安装） #

如果不想全局安装工具，可以把serve作为项目开发依赖安装，并添加到package.json的脚本里：

• 安装依赖：

  npm install --save-dev serve
  # 或者yarn
  yarn add --dev serve
  

• 打开package.json，在scripts字段里新增一行：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "serve": "serve -s build" // 新增这一行
  }
  

• 之后只要在项目根目录执行以下命令就能启动生产版本了：

  npm run serve
  # 或者yarn
  yarn serve
  

不管用哪种方法，启动后访问对应的地址，你看到的就是经过压缩、Tree-Shaking等优化后的生产版本，完全适合用来测试性能。

内容的提问来源于stack exchange，提问作者Green Mint