前端发布系统评审ppt

---

title: 前端发布系统评审ppt url: https://www.yuque.com/endday/blog/rg2qgq

{"format":"lakeshow","type":"Show","version":"1.0","shows":[{"body":[{"type":"text","html":"<div style="text-align:center;"><span style="font-size:92px; font-weight:bold; color:rgb(38, 38, 38);">前端发布系统迭代","id":"75de4ea9-f198-4231-9ec7-b91a31624c1c","x":96.42857142857156,"y":304.2380952380953,"zIndex":0,"width":1245.9761904761904,"height":168,"rotate":0},{"type":"text","html":"<div style="text-align:center;"><span style="color:rgb(140, 140, 140); font-size:36px;">需求评审","id":"f42d3ef4-4582-45dc-af95-b88a31932ac1","x":96.42857142857156,"y":436.1320496484024,"zIndex":1,"width":1245.9761904761904,"height":91,"rotate":0}],"fill":{"color":"#ffffff"},"id":"cc7ff708-0194-4a86-a670-323b8fdd9842","thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637916786741-4c8f3e0f-a535-4198-a7e2-cf060d5bb95c.jpg"},{"id":"7bb9e7af-e37a-40d4-9355-8709392c0d50","body":\[{"type":"text","html":"\

<span style="font-size:64px;">项目历史

","stroke":{"width":2},"id":"468ef1e7-97e4-4c3a-9d41-933d0f4e839c","x":81.46959896507104,"y":33.67529107373878,"zIndex":0,"width":288.0672703751618,"rotate":0,"height":119.359375},{"type":"text","html":"<div style="font-size:32px; text-align:left;">在19年，前端发布系统经过大版本迭代<div style="font-size:32px; text-align:left;">1、log日志的实时展示，使用webSocket替代了EventSource<div style="font-size:32px; text-align:left;">2、将项目数据储存到数据库中，例如viewPath<div style="font-size:32px; text-align:left;">3、增加了npm Install功能，可以使用项目独立的node_modules<div style="font-size:32px; text-align:left;">4、增加分支合并功能<div style="font-size:32px; text-align:left;">5、不再需要判断gulp项目、删除同步到master的功能等","stroke":{"width":2},"id":"d7b0a770-3bd0-47a8-ab07-69da141e68c4","x":77.4695989650711,"y":206.62095730918497,"zIndex":1,"width":1271.9650711513584,"height":386.5187580853816,"rotate":0}],"fill":{"color":"#ffffff"},"thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637916845966-26218d5d-fed7-4ac0-a86d-eb45db95ac6d.jpg"},{"id":"070557a3-1703-444e-a72e-818b13c8504a","body":\[{"type":"text","html":"\

<span style="font-size:64px;">背景

","stroke":{"width":2},"id":"468ef1e7-97e4-4c3a-9d41-933d0f4e839c","x":81.46959896507104,"y":33.67529107373878,"zIndex":0,"width":288.0672703751618,"rotate":0,"height":119.359375},{"type":"text","html":"<div style="font-size:32px; text-align:left;">1、前端构建流程长<div style="font-size:32px; text-align:left;">2、需要手动操作的流程多<div style="font-size:32px; text-align:left;">3、性能瓶颈明显<div style="font-size:32px; text-align:left;">4、定制项目个性化构建能力薄弱<div style="font-size:32px; text-align:left;">
<div style="font-size:32px; text-align:left;">为了缩短发布流程，减少重复操作，提高前端开发的效率，<div style="font-size:32px; text-align:left;">需要对前端发布系统进行一次迭代。","stroke":{"width":2},"id":"d7b0a770-3bd0-47a8-ab07-69da141e68c4","x":80.4695989650711,"y":204.62095730918497,"zIndex":1,"width":1271.9650711513584,"height":394.80595084087963,"rotate":0}],"fill":{"color":"#ffffff"},"thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637908307497-779d9753-069e-4c54-baa7-a1b5a2af5c02.jpg"},{"id":"8ccb6e56-a614-4cec-90b7-fea22ab995c3","body":\[{"type":"text","html":"\

<span style="font-size:64px;">现状分析

","stroke":{"width":2},"id":"468ef1e7-97e4-4c3a-9d41-933d0f4e839c","x":76.4695989650711,"y":31.675291073738777,"zIndex":0,"width":438.86416558861583,"rotate":0},{"type":"text","html":"<div style="font-size:32px; text-align:left;">1、只能发布在web仓库中的项目，不支持发布独立的仓库\r<div style="font-size:32px; text-align:left;">2、依赖前端执行接口，构建流程存在缺陷\n<div style="font-size:32px; text-align:left;">3、构建采取的手动触发，无法通过提交或者推送代码触发<div style="font-size:32px; text-align:left;">4、针对个别项目的个性化定制，支持度差，如前置或后置钩子任务<div style="font-size:32px; text-align:left;">5、手动维护node_modules的更新","stroke":{"width":2},"id":"117c2ca1-1d36-40df-9027-ae17c9f24bdb","x":75.4695989650711,"y":263.0620957309186,"zIndex":1,"width":1267.6778783958605,"height":279.78007761966353,"rotate":0},{"type":"text","html":"<div style="text-align:left;"><span style="font-size:36px;">功能缺陷","stroke":{"width":2},"id":"2f1d8a71-2314-4ccb-bd08-87568f133cf7","x":76.4695989650711,"y":153.03466607373878,"zIndex":2}],"fill":{"color":"#ffffff"},"thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637914667822-f1718cac-6949-4843-94ee-ce57dd86585c.jpg"},{"id":"37acb37b-f565-4469-b213-216f6f151975","body":\[{"type":"text","html":"\

<span style="font-size:64px;">现状分析

","stroke":{"width":2},"id":"468ef1e7-97e4-4c3a-9d41-933d0f4e839c","x":74.4695989650711,"y":31.675291073738777,"zIndex":0,"width":438.86416558861583,"rotate":0},{"type":"text","html":"<div style="font-size:32px; text-align:left;">1、并发任务存在性能瓶颈
<div style="font-size:32px; text-align:left;">2、构建环境和项目接口在同一台机器，没有分离，影响性能<div style="font-size:32px; text-align:left;">3、cdn发布接口存在明显的性能问题","stroke":{"width":2},"id":"117c2ca1-1d36-40df-9027-ae17c9f24bdb","x":70.4695989650711,"y":245.43984476067277,"zIndex":1,"width":1267.6778783958605,"height":196.80724450194046,"rotate":0},{"type":"text","html":"<div style="text-align:left;"><span style="font-size:36px;">性能问题","stroke":{"width":2},"id":"1550ffb5-7ee5-4d95-9074-21ec45b948b1","x":74.4695989650711,"y":153.03466607373878,"zIndex":2}],"fill":{"color":"#ffffff"},"thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637914668555-389605bb-3927-4047-b067-1f7c170a4c38.jpg"},{"id":"341b7f55-5353-429f-87e3-df3f534f44e3","body":\[{"type":"text","html":"\

<span style="font-size:64px;">如何解决

","stroke":{"width":2},"id":"468ef1e7-97e4-4c3a-9d41-933d0f4e839c","x":78.4695989650711,"y":30.675291073738777,"zIndex":0,"width":290.01940491591205,"rotate":0},{"type":"text","html":"<div style="font-size:32px; text-align:left;">​
","stroke":{"width":2},"id":"e3639d5f-c7ea-47ee-88c3-bc27b47aac60","x":79.4695989650711,"y":193.85510996119015,"zIndex":1},{"type":"text","html":"<div style="font-size:32px; text-align:left;">利用gitlab runner或者jenkins这些持续集成工具，建立一个全流程的CICD环境<div style="font-size:32px; text-align:left;">由持续集成工具来提供构建环境，配置解析，任务管理等功能","stroke":{"width":2},"id":"faa976cf-a5ea-43cc-b5ea-6ba8f5689e86","x":81.56532988357048,"y":180.37645536869343,"zIndex":2,"width":1270.9650711513584,"height":147.65329883570502,"rotate":0}],"fill":{"color":"#ffffff"},"thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637916346029-83b6563c-9cc7-4411-80f3-6cc3c9d00361.jpg"},{"id":"3b416470-c956-4aad-8403-cac08bbf81c4","body":\[{"type":"text","html":"\

<span style="font-size:64px;">方案对比

","stroke":{"width":2},"id":"468ef1e7-97e4-4c3a-9d41-933d0f4e839c","x":79.4695989650711,"y":31.675291073738777,"zIndex":0,"width":438.86416558861583,"rotate":0},{"type":"text","html":"<div style="font-size:32px; text-align:left;">现有流程","stroke":{"width":2},"id":"3101c3f7-1b96-4c2a-bf7b-b61b6f48e5d1","x":79.4695989650711,"y":191.75937904269082,"zIndex":1},{"type":"image","image":{"src":"https://cdn.nlark.com/yuque/0/2021/png/122551/1637907932788-c30bb4e6-6596-4c62-a10f-7726fd23d1ba.png","naturalWidth":790,"naturalHeight":781,"uploadInfo":{"hash":"b7fcc8f3db9aa0e77d9b13cd0e8093ad4da63a26af87a51a70e4dacc550d65b2","fileName":"image.png","fileType":"image/png","fileSize":56825,"localTempSrc":"blob:https://www.yuque.com/681c12a4-5a57-4671-9972-3d1229af6efe","state":-2}},"width":790,"height":781.0000000000001,"x":512.5679172056921,"y":14.499999999999943,"constraints":{"proportion":true},"id":"8e10afc2-4c48-43ec-bef4-1701272a7c52","zIndex":2}],"fill":{"color":"#ffffff"},"thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637909739344-41b260f3-ae9d-46db-be67-1fe6737b04ca.jpg"},{"id":"3c1faa2c-291f-47b6-a860-6f8527d07f78","body":\[{"type":"text","html":"\

<span style="font-size:64px;">方案对比

","stroke":{"width":2},"id":"468ef1e7-97e4-4c3a-9d41-933d0f4e839c","x":79.4695989650711,"y":31.675291073738777,"zIndex":0,"width":438.86416558861583,"rotate":0},{"type":"text","html":"<div style="font-size:32px; text-align:left;">改进流程","stroke":{"width":2},"id":"dd5c27ef-c13d-440c-b625-96be1898a45f","x":79.4695989650711,"y":193.85510996119018,"zIndex":1},{"type":"image","image":{"src":"https://cdn.nlark.com/yuque/0/2021/png/122551/1637908663122-1d5af881-54f7-4c76-8b80-5bb3b3c108d3.png","naturalWidth":784,"naturalHeight":923,"uploadInfo":{"hash":"09b6f95cae3f001440b1e432eaf8031df80d221d79feefc1a23399808314deb7","fileName":"image.png","fileType":"image/png","fileSize":90921,"localTempSrc":"blob:https://www.yuque.com/c903c40e-9a3e-4a78-ab62-48ff645e7797","state":-2}},"width":688.0173347778982,"height":810,"x":563.559249816743,"y":0.5,"constraints":{"proportion":true},"id":"2ca6a12a-6a20-4d55-ad8d-6952c329b7e2","zIndex":2}],"fill":{"color":"#ffffff"},"thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637910040814-b5613d75-439a-4e68-a870-32cbf93c2caa.jpg"},{"id":"9cc89ed6-3113-4469-b48a-07b12f5c655c","body":\[{"type":"text","html":"\

<span style="font-size:64px;">改进

","stroke":{"width":2},"id":"468ef1e7-97e4-4c3a-9d41-933d0f4e839c","x":73.4695989650711,"y":30.675291073738777,"zIndex":0,"width":176.61060802069863,"rotate":0},{"type":"text","html":"<div style="text-align:left;"><span style="font-size:24px;">1、可控制并发<div style="text-align:left;"><span style="font-size:24px;">2、支持更大内存占用的构建任务<div style="text-align:left;"><span style="font-size:24px;">3、构建任务在ci中运行，和项目接口分离<div style="text-align:left;"><span style="font-size:24px;">4、优化cdn上传接口<div style="text-align:left;"><span style="font-size:24px;">5、支持在 Kubernetes 集群中运行 GitLab-Runner 来动态执行 GitLab-CI 脚本任务","stroke":{"width":2},"id":"117c2ca1-1d36-40df-9027-ae17c9f24bdb","x":234.03234152651999,"y":150.21454560155232,"zIndex":1,"width":1267.6778783958605,"height":208.68196151358353,"rotate":0},{"type":"text","html":"<div style="text-align:left;"><span style="font-size:36px;">性能优化","stroke":{"width":2},"id":"1550ffb5-7ee5-4d95-9074-21ec45b948b1","x":66.13454075032337,"y":149.21454560155232,"zIndex":2,"height":55.16708441138428,"rotate":0},{"type":"text","html":"<div style="text-align:left;"><span style="font-size:24px;">1、支持单项目仓库发布
<div style="text-align:left;"><span style="font-size:24px;">2、构建流程变成任务，无需手动触发，包括移动文件及发布cdn<div style="text-align:left;"><span style="font-size:24px;">3、通过提交或者推送代码触发构建，支持定时任务<div style="text-align:left;"><span style="font-size:24px;">4、通过配置文件可以配置前置钩子和后置钩子<div style="text-align:left;"><span style="font-size:24px;">5、根据package.json作为版本来缓存node_modules<div style="text-align:left;"><span style="font-size:24px;">6、远程配置文件合并(ci流程配置的继承与合并）<div style="text-align:left;"><span style="font-size:24px;">7、多版本node控制<div style="text-align:left;"><span style="font-size:24px;">8、旧的构建任务可以查看结果，包括log和下载文件","stroke":{"width":2},"id":"12651d90-65c0-4ec9-af5b-d6664546d117","x":227.69728331177225,"y":375.9547825032341,"zIndex":3,"width":1267.6778783958605,"height":350.2638462160415,"rotate":0},{"type":"text","html":"<div style="text-align:left;"><span style="font-size:36px;">功能迭代","stroke":{"width":2},"id":"a12fe05f-a698-476b-bf0e-780b7f38f991","x":67.13454075032335,"y":376.95478250323407,"zIndex":4}],"fill":{"color":"#ffffff"},"thumb":"https://cdn.nlark.com/yuque/0/2021/jpg/122551/1637920160699-6f7ae1e2-84d4-4388-a995-298242b77f05.jpg"}],"settings":{"selected":\["9cc89ed6-3113-4469-b48a-07b12f5c655c"],"viewport":{"zoom":0.9543209876543209,"tlCanvasPoint":\[-26.60413971539457,-16.765847347994814,1],"width":1425,"height":805}},"text":"前端发布系统迭代\n需求评审项目历史\n在19年，前端发布系统经过大版本迭代1、log日志的实时展示，使用webSocket替代了EventSource2、将项目数据储存到数据库中，例如viewPath3、增加了npm Install功能，可以使用项目独立的node_modules4、增加分支合并功能5、不再需要判断gulp项目、删除同步到master的功能等背景\n1、前端构建流程长2、需要手动操作的流程多3、性能瓶颈明显4、定制项目个性化构建能力薄弱为了缩短发布流程，减少重复操作，提高前端开发的效率，需要对前端发布系统进行一次迭代。现状分析\n1、只能发布在web仓库中的项目，不支持发布独立的仓库\n2、依赖前端执行接口，构建流程存在缺陷\n3、构建采取的手动触发，无法通过提交或者推送代码触发4、针对个别项目的个性化定制，支持度差，如前置或后置钩子任务5、手动维护node_modules的更新\n功能缺陷现状分析\n1、并发任务存在性能瓶颈2、构建环境和项目接口在同一台机器，没有分离，影响性能3、cdn发布接口存在明显的性能问题\n性能问题如何解决\n​\n利用gitlab runner或者jenkins这些持续集成工具，建立一个全流程的CICD环境由持续集成工具来提供构建环境，配置解析，任务管理等功能方案对比\n现有流程方案对比\n改进流程改进\n1、可控制并发2、支持更大内存占用的构建任务3、构建任务在ci中运行，和项目接口分离4、优化cdn上传接口5、支持在 Kubernetes 集群中运行 GitLab-Runner 来动态执行 GitLab-CI 脚本任务\n性能优化\n1、支持单项目仓库发布2、构建流程变成任务，无需手动触发，包括移动文件及发布cdn3、通过提交或者推送代码触发构建，支持定时任务4、通过配置文件可以配置前置钩子和后置钩子5、根据package.json作为版本来缓存node_modules6、远程配置文件合并(ci流程配置的继承与合并）7、多版本node控制8、旧的构建任务可以查看结果，包括log和下载文件\n功能迭代"}