【前端】各种打包对比

前端打包

Author: Alla

1. 前端打包工具

gulp, webpack, vite

1.2 对比

1. 简单对比
   1. gulp：
   2. webpack：
   3. vite：开发模式的差异
2. 打包的简单流程
   1. 初始化配置
   2. 项目入口
   3. 依赖解析
   4. loader处理
   5. …
3. 开发模式的差异：Vite
   1. Webpack
      1. 先打包再启动开发服务器
      2. 当使用Webpack时，模块要在开发前打包，增加启动、构建时间
      3. Webpack：Node.js构建的，而Vite基于esbuild构建
   2. Vite
      1. 直接启动，并按需动态编译
      2. 对ES Modules的支持
         1. ES Modules：主动发起请求获取所需文件
         2. Vite：开发环境下模块作为浏览器执行的文件，而不像Webpack先打包，再给浏览器执行

1.3 前端工程化的理解

1. 框架
   1. 代码管理 - 版本控制（Version Control）项目开发与管理的标准
      1. 两种模式
         1. Lock-Modify-Unlock（锁-修改-解锁）
            1. 方法
               1. 用户对某文件修改的话，要先锁定再修改
               2. 修改完成后再解锁
            2. 优缺点
               1. 优点：能避免多人同时修改造成的冲突
               2. 缺点：减少了用户并发操作
            3. 版本控制恐惧：VSS（Visual Source Safe）
         2. Copy-Modify-Merge（拷贝-修改-合并）
            1.
      2. 版本控制器方式
         1. 集中式版本控制工具
            1. 中央服务器：拉取pull（fetch）
            2. 包含
               1. 版本库在自己的电脑上
               2. 多人
            3. 分布式：
      3. 工具：大多数采用的是分布式
         1. Git
            1.
         2. svn（Subversion）：查阅历史操作记录和实现协同开发
            1. 任意服务器中添加一个SVN版本库
            2. 具有CVS（Concurrent Versions System）具有数据存储的优点
               1. 信息资源存储后形成资源树结构
               2. 便于存储时，数据不会丢失
            3. Subversion管理随着时间改变
               1. 中央资料档案库Repository的文件服务器，会记住每一次文件的变动
               2. 客户端/服务器体系
                  1. 客户端的类型：客户端有两类，一种基于Web的 【WebSVN】，另一种以Tortoise SVN为代表的客户端软件
                  2. SVN存储版本数据
                     1. BDB（一种事物型安全表）：服务器中断时，有可能锁住数据
                     2. FSFS（一种不需要数据库的存储系统）
                  3. 优势
                     1. 具有CVS有的数据存储的优点，信息资源存储后形成资源数结构
               3. 档案库像普通的文件服务器；档案恢复到旧的版本，浏览文件的变动历史
                  1. Subversion：管理任何类型的文件
                  2. 客户端/服务器体系-项目各种版本存储在服务器上
         3. 个人理解：svn使用比git上传更慢，尽管git指令很复杂
            1.
   2. 构建工具
      1. Webpack
      2. Parcel
      3. Gulp
   3. 代码规范和静态分析
      1. ESLint：
      2. Prettier：
   4. 模块化开发
      1. ES6模块：
      2. CommonJS：
      3. AMD：
   5. 文档和知识管理
      1.
   6. 部署和持续集成
      1. Jenkins
      2. Travis CI
      3. Github Actions
   7. 自动化测试
      1. Jest
      2. Mocha
      3. Karma
2. 性能优化
3. 代码管理
4. 概念
   1. 现有项目进行优化升级
   2. 提高应用访问性能增强架构稳定性
   3. 大型项目进行工程化架构升级
   4. 开发工程化脚手架统一底层工作流程
   5. 提升团队作业协同性
   6. 提升项目开发、运行的效率
5. GC
   1. 程序工作过程中产生很多垃圾，垃圾是程序

1.4