前端react如何打包

使用 Create React App 打包

Create React App (CRA) 是官方推荐的 React 脚手架工具，内置了打包配置。在项目根目录运行以下命令生成生产环境打包文件：

npm run build

打包完成后，文件会输出到 build 目录，包含静态资源文件和 index.html。

自定义 webpack 配置

如果需要深度定制打包流程，可以 eject 配置或手动配置 webpack：

npm run eject

此操作会暴露所有配置文件，之后可修改 webpack.config.js 调整打包行为。

优化打包输出

通过以下方式优化打包结果：

npm install --save-dev compression-webpack-plugin

在 webpack 配置中添加压缩插件：

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  plugins: [new CompressionPlugin()],
};

代码分割

利用动态导入实现按需加载：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

配合 Suspense 使用可优化首屏加载速度。

环境变量配置

在项目根目录创建 .env.production 文件：

REACT_APP_API_URL=https://api.example.com

打包时会自动注入这些变量。

静态资源处理

确保正确引用静态资源：

import logo from './logo.png';

function Header() {
  return <img src={logo} alt="Logo" />;
}

webpack 会自动处理路径并优化文件名。

部署准备

打包后可部署到任意静态文件服务器：

npx serve -s build

此命令会启动本地服务器预览打包结果。