likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 82

概要

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

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中，可以按照以下步骤进行：

  1. 准备环境：

    • 确保在Jenkins服务器上已安装Node.js和npm（或者使用其他包管理工具，如Yarn）。
    • 安装全局的Webpack和webpack-cli，以便在构建过程中使用。

  2. 创建Jenkins项目：

    • 在Jenkins中创建一个新的项目（或任务），选择自由风格项目（Free-style project）或流水线项目（Pipeline）。

  3. 配置源代码管理：

    • 在项目配置中，选择适当的源代码管理工具，如Git、Subversion等。
    • 配置代码仓库的URL、凭据（Credentials）以及分支信息。

  4. 设置构建触发器：

    • 配置构建触发器，例如定时触发、代码变更触发、Webhook触发等。

  5. 配置构建步骤：

    • 在构建配置中，添加构建步骤来执行Webpack构建。
    • 可以使用"Execute shell"步骤执行npm或Yarn命令，例如：
    cd /path/to/project
npm install   # 或 yarn install
npm run build # 或 yarn build

  6. 构建后的操作：

    • 在构建完成后，可以配置一些后续的操作，例如测试、代码质量检查、构建报告生成等。
    • 可以使用Jenkins的插件来实现这些操作，例如JUnit插件、HTML Publisher插件等。

  7. 保存并运行构建项目：

    • 完成配置后，保存项目配置并尝试运行构建项目。
    • 检查Jenkins的控制台输出，确保构建过程正常执行。

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

扩展阅读

转载自:https://juejin.cn/post/7253453908038631485
评论
请登录