不可不知的前端工程化—— 工程化构建部署（CI/CD）

站长

2023年09月24日 10:54 · 阅读数 24

概要

前端工程化构建部署是整个工程化体系中非常重要的环节，可以说贯穿了整个项目周期，大幅提升了项目团队的开发、运维效率，在本文中主要由以下几个问题切入，全面了解前端工程化构建部署流程和具体实现：

1、前端工程化部署是如何产生的？解决了哪些问题？

2、前端工程化部署都有哪几个流程？每个流程都是具体都是做什么的？

3、前端工程化构建工具有哪些？如何对前端工程化构建速度进行优化？

4、如何将工程化构建工具（webpack）集成到CI/CD 工具（Jenkins）中

扩展阅读：如何选择CI/CD 工具？如何实现前端 GitLab CI/CD 或 Jenkins？

手动部署vs前端工程化部署

在没有引入工程化部署之前，相信大家都经历过如下的部署场景：

手动的将打包后的静态资源文件（如HTML、CSS、JavaScript 文件）上传到服务器上，
手动配置相关的服务，如Nginx或Apache，并在配置文件里将请求指向正确的文件路径和服务端口，
手动的处理缓存请求、资源压缩和优化操作
手动启动与停止服务和应用程序。

这种纯手工的操作，存在大量的重复性，耗费人力的同时且不时会出现因人为因素造成的不一致和错误风险。尤其是版本上线过程中，其中的漫长和心酸的部署历程真的谁经历谁懂！！！

而工程化部署的出现，就解决了手动部署所耗费的人力和时间成本问题，很大程度上缓解了运维人员的精神压力，使整个部署过程自动化、标准化，极大地提高了部署效率，且工程化的部署提供了可扩展和灵活的配置选项，适应不同的项目需求和环境。通过版本控制和自动化流程，团队成员可以更好地协作和跟踪变更，降低了部署的风险。

前端工程化部署

自动化部署 CI/CD概念阐述

说到工程化，就离不开CI/CD的概念了，CI是持续集成（Continuous Integration），CD持续交付/持续部署（Continuous Delivery/Continuous Deployment）。

CI持续集成（Continuous Integration）可以理解为是将代码集成到共有仓库（如Git）中，并自动进行构建、测试和验证，以确保团队成员的代码都能够统一的集成在一起，同时减少冲突和问题。
CD持续交付（Continuous Delivery）和持续部署（Continuous Deployment）是在持续集成的基础上，对代码进行自动化构建、测试和发布，并可以进行快速、可靠地部署。持续部署是进一步自动化持续交付的过程，通过自动化流水线将程序代码的更改自动部署到生产环境中。

CI/CD 工具选择

Jenkins：一个开源的、可扩展的CI/CD工具，支持多种编程语言和版本控制系统,具有丰富的插件生态系统和广泛的应用支持。链接

GitHub Actions：GitHub 是一个基于 Git 的代码托管平台，也提供了 CI/CD 的功能，可以通过 GitHub Actions 实现自动化构建、测试和部署。链接

GitLab CI/CD： GitLab是基于Git的代码托管平台，版本控制平台内置的CI/CD工具，与GitLab紧密集成，提供一体化的代码管理和持续交付功能。链接

CircleCI：CircleCI 是一个云端的 CI/CD 工具，支持多种编程语言和版本控制系统，使用简单，适合小型团队。链接

Travis CI：Travis CI 是一个云端的 CI/CD 工具，支持多种编程语言和版本控制系统，使用简单，适合小型团队。链接

前端项目部署流程

1、代码获取

使用版本控制系统（如Git）管理前端项目的代码，将项目团队成员代码统一存储在指定的代码仓库中。

2、依赖安装

在部署前，确保项目所需的依赖包已经定义并记录在项目配置文件（如package.json）中。
使用包管理工具（如npm、Yarn）安装项目的依赖包。

3、执行构建

执行构建或编译步骤将源代码转换为可执行的、优化过的前端资源。
包括压缩、合并、转换文件格式（如将Sass编译为CSS）、转译JavaScript（如将ES6+转换为ES5）等操作。
常见的构建工具包括Webpack、Gulp、Rollup等。

4、打包部署

将构建生成的静态资源部署到目标服务器或云服务上。
可以通过FTP、SCP、rsync等工具进行手动部署，或者使用自动化工具（如Jenkins、GitLab CI/CD）进行自动化部署。

前端工程化构建

如何在webpack中优化构建速度？

在Webpack中，可以采取一些优化措施来提高构建速度。以下是一些常见的优化方法和相应的代码示例：

1. 使用缓存（Caching）

启用缓存可以避免在每次构建时重新编译未发生更改的模块。
在Webpack配置中，使用cache-loader或hard-source-webpack-plugin等插件启用缓存功能。
示例代码（使用cache-loader）：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'cache-loader',
          'babel-loader',
        ],
      },
    ],
  },
};

2. 代码分割（Code Splitting)

使用代码分割可以将代码拆分为更小的块，按需加载，从而减少初始加载时间。
在Webpack配置中，使用optimization.splitChunks配置进行代码分割。
示例代码：

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

3. 减少不必要的文件处理

通过配置exclude或include选项，减少对不需要处理的文件的处理过程。
示例代码：

 module.exports = {
  // ...
  module: {
    rules: [
      { 
         test: /\.js$/, 
         include: /src/, // 仅处理 src 目录下的文件 
         use: 'babel-loader', 
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: 'css-loader',
      },
    ],
  },
};

4. 使用Webpack的DLL（Dynamic Link Library)

使用DLL将一些不经常变化的依赖包提前编译和打包，减少重新构建的时间。
示例代码（在webpack.config.js中配置DLL）：

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dll/vendor-manifest.json'),
    }),
  ],
};

5. 压缩和优化

使用Webpack的压缩和优化插件，如terser-webpack-plugin、optimize-css-assets-webpack-plugin等，可以压缩和优化生成的代码和资源文件。
示例代码：

const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(), // 压缩JavaScript代码
      new OptimizeCSSAssetsPlugin(), // 优化CSS代码
    ],
  },
};

Jenkins与前端构建工具的集成

如何将前端构建工具集成到Jenkins中？

要将Webpack集成到Jenkins中，可以按照以下步骤进行：

准备环境：
- 确保在Jenkins服务器上已安装Node.js和npm（或者使用其他包管理工具，如Yarn）。
- 安装全局的Webpack和webpack-cli，以便在构建过程中使用。
创建Jenkins项目：
- 在Jenkins中创建一个新的项目（或任务），选择自由风格项目（Free-style project）或流水线项目（Pipeline）。
配置源代码管理：
- 在项目配置中，选择适当的源代码管理工具，如Git、Subversion等。
- 配置代码仓库的URL、凭据（Credentials）以及分支信息。
设置构建触发器：
- 配置构建触发器，例如定时触发、代码变更触发、Webhook触发等。
配置构建步骤：
- 在构建配置中，添加构建步骤来执行Webpack构建。
- 可以使用"Execute shell"步骤执行npm或Yarn命令，例如：
```
cd /path/to/project
npm install   # 或 yarn install
npm run build # 或 yarn build
```
构建后的操作：
- 在构建完成后，可以配置一些后续的操作，例如测试、代码质量检查、构建报告生成等。
- 可以使用Jenkins的插件来实现这些操作，例如JUnit插件、HTML Publisher插件等。
保存并运行构建项目：
- 完成配置后，保存项目配置并尝试运行构建项目。
- 检查Jenkins的控制台输出，确保构建过程正常执行。

具体的操作步骤，可以参照以下扩展阅读的文章。