当前位置：首页 > article >正文

生产模式打包

article 2024/12/27 16:34:13

在生产模式下打包 Node.js 和前端（例如 Vue 或 React）应用时，通常需要对代码进行优化，使其在生产环境中运行更高效。以下是如何在生产模式下配置和打包项目的步骤：

1. Node.js 生产模式打包

Node.js 本身不需要像前端框架那样进行复杂的打包过程，但可以使用工具优化部署和性能。

(1) 设置 `NODE_ENV` 环境变量

在生产环境中，确保将 NODE_ENV 设置为 production。这将使许多库（如 express）自动应用性能优化。

# Linux / MacOS
export NODE_ENV=production

# Windows
set NODE_ENV=production

(2) 使用 `PM2` 等进程管理工具

PM2 是 Node.js 常用的进程管理工具，适合生产环境。

# 安装 PM2
npm install -g pm2

# 使用 PM2 启动应用
pm2 start app.js --name "my-app"

(3) 代码打包（使用 Webpack / esbuild）

为了进一步优化代码，可以使用 Webpack 或 esbuild 对 Node.js 应用进行打包。Webpack 可以将代码打包成单一文件，同时支持 Tree Shaking 去除无用代码。

(4) 使用 TypeScript（如果适用）

如果项目使用 TypeScript，可以通过 tsc 编译成 JavaScript 后部署，提高可维护性和类型安全。

2. Vue / React 生产模式打包

Vue 和 React 应用在生产模式下打包时，通常通过 Webpack 或 Vite 进行配置。

(1) 使用 `npm` 或 `yarn` 进行生产模式打包

在 Vue 和 React 中，使用 npm run build 命令触发生产模式打包，通常会自动设置 NODE_ENV 为 production 并优化代码。

# Vue
npm run build

# React
npm run build

(2) 配置 Webpack 或 Vite

确保在 webpack.config.js 或 vite.config.js 中设置生产模式相关配置：

启用代码压缩：如 TerserPlugin，减少代码体积。
Tree Shaking：剔除未使用的代码。
分离代码：分离 vendor 代码（第三方库），减少初始加载时间。
代码拆分：将代码分块，按需加载，优化性能。

Webpack 配置示例：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    splitChunks: {
      chunks: 'all',
    },
  },
  performance: {
    hints: 'warning',
    maxAssetSize: 512000, // 设定文件大小限制
    maxEntrypointSize: 512000,
  },
};

Vite 配置示例：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'terser', // 或 'esbuild' 进行快速压缩
    chunkSizeWarningLimit: 500,
  },
});