軟件工程互聯(lián)網(wǎng)公司前端開(kāi)發(fā)實(shí)習(xí)報(bào)告一、摘要

2023年7月1日至2023年8月31日，我在一家互聯(lián)網(wǎng)公司擔(dān)任前端開(kāi)發(fā)實(shí)習(xí)生，負(fù)責(zé)電商平臺(tái)改版項(xiàng)目的界面開(kāi)發(fā)與優(yōu)化工作。核心工作成果包括重構(gòu)商品詳情頁(yè)組件，使頁(yè)面加載速度提升30%，通過(guò)代碼分割將首屏渲染時(shí)間縮短至1.2秒；參與開(kāi)發(fā)響應(yīng)式布局模塊，適配5種設(shè)備尺寸，覆蓋80%用戶場(chǎng)景。期間應(yīng)用ReactHooks優(yōu)化組件狀態(tài)管理，使用Webpack5進(jìn)行資源壓縮，結(jié)合ChromeDevTools進(jìn)行性能調(diào)優(yōu)。提煉出模塊化開(kāi)發(fā)與自動(dòng)化測(cè)試的復(fù)用方法論，例如通過(guò)Storybook實(shí)現(xiàn)組件快速迭代，用Jest編寫(xiě)單元測(cè)試覆蓋率達(dá)95%。

二、實(shí)習(xí)內(nèi)容及過(guò)程

實(shí)習(xí)目的主要是將學(xué)校學(xué)的軟件工程理論知識(shí)跟實(shí)際項(xiàng)目結(jié)合起來(lái)，看看自己到底適不適合前端開(kāi)發(fā)這行。

實(shí)習(xí)單位是家做電商平臺(tái)的互聯(lián)網(wǎng)公司，規(guī)模不大不小的那種，主要做B2C業(yè)務(wù)，技術(shù)棧以React為主。我被分到前端團(tuán)隊(duì)，跟著一位帶我的師兄，負(fù)責(zé)一個(gè)電商平臺(tái)改版項(xiàng)目。

實(shí)習(xí)內(nèi)容挺具體的，剛開(kāi)始主要是熟悉項(xiàng)目代碼庫(kù)和開(kāi)發(fā)環(huán)境，用了三四天時(shí)間。然后就開(kāi)始接手任務(wù)了，第一個(gè)任務(wù)是重構(gòu)商品詳情頁(yè)的輪播圖組件，原來(lái)的組件耦合度太高，修改起來(lái)特別麻煩。我花了大概一周時(shí)間，把它拆分成獨(dú)立的hooks組件，用了useRef和useEffect來(lái)管理狀態(tài)，效果挺明顯的，頁(yè)面渲染速度快了不少。

接下來(lái)是開(kāi)發(fā)響應(yīng)式布局模塊，適配手機(jī)、平板、電腦這幾種設(shè)備，這個(gè)項(xiàng)目還挺花時(shí)間的，前后折騰了快兩周。主要是用了CSS的媒體查詢和TailwindCSS的響應(yīng)式工具類，寫(xiě)了不少條件渲染的代碼。最后測(cè)試下來(lái)，在各種設(shè)備上的顯示效果都挺不錯(cuò)的，用戶反饋也好。

還參與了搜索框組件的重寫(xiě)，把原來(lái)的jQuery代碼改成了React代碼，這個(gè)過(guò)程中學(xué)到了不少React的最佳實(shí)踐。師兄還教了我怎么用Webpack5進(jìn)行代碼分割，優(yōu)化項(xiàng)目打包體積，我試著做了幾次，確實(shí)能感覺(jué)到加載速度變快了。

遇到的困難主要是剛開(kāi)始對(duì)項(xiàng)目代碼不熟悉，有些業(yè)務(wù)邏輯搞不明白，問(wèn)師兄的時(shí)候發(fā)現(xiàn)自己理解得不夠深入。還有就是開(kāi)發(fā)過(guò)程中遇到了一個(gè)跨域問(wèn)題，請(qǐng)求后臺(tái)接口一直失敗，查了好久才找到問(wèn)題所在，原來(lái)是前端請(qǐng)求的域名跟后臺(tái)配置的不一致。為了解決這個(gè)難題，我專門(mén)去學(xué)習(xí)了瀏覽器緩存和CORS相關(guān)的知識(shí)，最后通過(guò)配置后端的CORS策略解決了問(wèn)題。

實(shí)習(xí)成果方面，我重構(gòu)的輪播圖組件把頁(yè)面加載速度提升了30%，首屏渲染時(shí)間從原來(lái)的3秒縮短到1.2秒。開(kāi)發(fā)的響應(yīng)式布局模塊覆蓋了80%的用戶設(shè)備，適配效果很好。這些數(shù)據(jù)都是通過(guò)ChromeDevTools的性能分析功能跑出來(lái)的。

這個(gè)實(shí)習(xí)經(jīng)歷讓我對(duì)前端開(kāi)發(fā)的工作流程有了更深的理解，從需求分析到UI設(shè)計(jì)，再到代碼實(shí)現(xiàn)和測(cè)試部署，每個(gè)環(huán)節(jié)都挺重要的。也體會(huì)到團(tuán)隊(duì)協(xié)作的重要性，一個(gè)人埋頭苦干效率肯定沒(méi)這么高。最大的收獲是學(xué)會(huì)了怎么用工程化的方法來(lái)解決問(wèn)題，比如用Storybook來(lái)管理組件庫(kù)，用Jest來(lái)寫(xiě)單元測(cè)試，這些技能對(duì)我以后的工作肯定很有幫助。職業(yè)規(guī)劃方面，我覺(jué)得自己確實(shí)挺喜歡前端的，以后可以考慮往這個(gè)方向發(fā)展，不過(guò)還得繼續(xù)學(xué)習(xí)新技術(shù)，提升自己的能力。

實(shí)習(xí)單位的管理上，我覺(jué)得有點(diǎn)問(wèn)題，比如項(xiàng)目進(jìn)度安排得太滿了，有時(shí)候得加班才能完成任務(wù)。培訓(xùn)機(jī)制也一般，給新人的資料太少了，很多東西都得自己摸索。崗位匹配度方面，我負(fù)責(zé)的任務(wù)主要是些代碼實(shí)現(xiàn)的工作，沒(méi)接觸到太多設(shè)計(jì)或者架構(gòu)層面的東西，感覺(jué)有點(diǎn)遺憾。

改進(jìn)建議的話，建議單位能給實(shí)習(xí)生提供更系統(tǒng)的培訓(xùn)材料，比如前端開(kāi)發(fā)規(guī)范、項(xiàng)目架構(gòu)文檔什么的，這樣能讓我們更快地融入團(tuán)隊(duì)。另外，項(xiàng)目進(jìn)度安排得松一點(diǎn)，給新人多點(diǎn)時(shí)間學(xué)習(xí)和適應(yīng)，別一上來(lái)就壓得那么緊。最好能讓我們參與一些更核心的任務(wù)，這樣成長(zhǎng)會(huì)更快些。

三、總結(jié)與體會(huì)

這八周的實(shí)習(xí)，像是在學(xué)校理論知識(shí)和真實(shí)工作場(chǎng)景之間搭了一座橋。7月1日剛開(kāi)始的時(shí)候，說(shuō)實(shí)話挺懵的，面對(duì)一大堆陌生的代碼和業(yè)務(wù)邏輯，心里挺沒(méi)底的。但每天跟著師兄學(xué)，看他在GitHub上提交代碼，用GitLab管理項(xiàng)目，感覺(jué)自己的視野一下子就開(kāi)闊了。到8月31日結(jié)束的時(shí)候，能獨(dú)立完成商品詳情頁(yè)重構(gòu)這種任務(wù)，心里挺有成就感的。

實(shí)習(xí)最大的價(jià)值閉環(huán)，是把我之前學(xué)的那些零散的技術(shù)點(diǎn)串聯(lián)起來(lái)了。以前學(xué)ReactHooks的時(shí)候，只是覺(jué)得挺好用，但真正用在一個(gè)復(fù)雜的電商項(xiàng)目里，優(yōu)化組件狀態(tài)管理，才體會(huì)到它帶來(lái)的效率提升。之前在學(xué)校寫(xiě)作業(yè)，隨便找個(gè)工具跑一下就行，現(xiàn)在在真實(shí)項(xiàng)目中，得考慮代碼的可維護(hù)性、性能、兼容性，這些都是在學(xué)校里學(xué)不到的。比如我重構(gòu)的那個(gè)輪播圖組件，通過(guò)模塊化設(shè)計(jì)，不僅自己用著方便，后來(lái)另一個(gè)同事也借用了我的思路，這種被團(tuán)隊(duì)認(rèn)可的感覺(jué)，是之前沒(méi)有過(guò)的。

這次實(shí)習(xí)也讓我更清楚自己的職業(yè)規(guī)劃了。之前我有點(diǎn)搖擺不定，現(xiàn)在覺(jué)得前端開(kāi)發(fā)確實(shí)挺適合我的，特別是組件化開(kāi)發(fā)和性能優(yōu)化這塊，我挺有興趣的。實(shí)習(xí)期間，我發(fā)現(xiàn)自己對(duì)前端工程化這塊挺欠缺的，比如Webpack的配置、CI/CD流程這些，這些都是我接下來(lái)要重點(diǎn)學(xué)習(xí)的方向。我打算下學(xué)期考個(gè)前端工程師的證書(shū)，把學(xué)到的知識(shí)系統(tǒng)化一下，這樣以后求職的時(shí)候也能更有底氣。

看著現(xiàn)在互聯(lián)網(wǎng)上各種新的前端框架和工具，比如Vite、Svelte這些，感覺(jué)技術(shù)發(fā)展太快了。這次實(shí)習(xí)讓我意識(shí)到，自己要學(xué)的還有很多，不能stopshere。比如我實(shí)習(xí)的時(shí)候用的還是React，但我也在自學(xué)Vue3，感覺(jué)不同框架各有優(yōu)勢(shì)，以后可能要根據(jù)項(xiàng)目需求來(lái)選擇技術(shù)棧。另外，現(xiàn)在前端和后端的界限越來(lái)越模糊了，像Serverless、微前端這些新概念，都得去了解了解。我覺(jué)得自己需要保持學(xué)習(xí)的熱情，才能跟上這個(gè)行業(yè)的節(jié)奏。

從學(xué)生到職場(chǎng)人的轉(zhuǎn)變，最明顯的就是責(zé)任感吧。以前做項(xiàng)目，做完了就行，現(xiàn)在得考慮用戶會(huì)不會(huì)用，會(huì)不會(huì)崩，這種責(zé)任感讓我做事更細(xì)心了。遇到難題的時(shí)候，以前可能直接問(wèn)老師，現(xiàn)在會(huì)先自己查資料、試錯(cuò)，抗壓能力也強(qiáng)了不少。雖然實(shí)習(xí)結(jié)束，但這種心態(tài)會(huì)一直保持下去，以后不管是學(xué)習(xí)還是工作，都會(huì)更加認(rèn)真負(fù)責(zé)。這次實(shí)習(xí)經(jīng)歷，對(duì)