軟件工程軟件坊前端開發(fā)實(shí)習(xí)生實(shí)習(xí)報(bào)告一、摘要

2023年7月10日至2023年9月5日，我在XX公司擔(dān)任前端開發(fā)實(shí)習(xí)生，負(fù)責(zé)電商平臺(tái)模塊的UI界面重構(gòu)與性能優(yōu)化。通過7周迭代開發(fā)，完成3個(gè)核心頁面重構(gòu)，將頁面加載速度提升15%，通過代碼分割將首屏加載時(shí)間縮短至1.2秒，累計(jì)修復(fù)12處跨瀏覽器兼容性問題。熟練應(yīng)用ReactHooks優(yōu)化組件狀態(tài)管理，使用Webpack5構(gòu)建自動(dòng)化測試環(huán)境，通過Jest完成85個(gè)單元測試用例覆蓋。總結(jié)出基于組件化封裝的代碼復(fù)用方法論，將公共組件庫復(fù)用率提升至60%。實(shí)習(xí)期間，通過每日站會(huì)復(fù)盤與Pair編程，將問題解決效率提高30%。

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

2023年7月10日到9月5日，我在XX公司做前端開發(fā)實(shí)習(xí)生，跟著團(tuán)隊(duì)搞電商平臺(tái)改版。初期主要是熟悉項(xiàng)目，用了兩周摸透現(xiàn)有代碼庫，特別是React組件樹和Vuex狀態(tài)管理。我接手了購物車模塊重構(gòu)，原代碼耦合度高，重構(gòu)后把組件重用率提了40%，還用Webpack5搞了懶加載，首屏加載速度從3秒降到1.5秒。碰上過跨瀏覽器兼容問題，Chrome沒事Firefox就出亂碼，最后發(fā)現(xiàn)是CSS變量實(shí)現(xiàn)方式差異，改用傳統(tǒng)CSS規(guī)則解決。每天參與代碼評審，學(xué)了不少代碼規(guī)范。

團(tuán)隊(duì)用Jira管需求，我負(fù)責(zé)把需求轉(zhuǎn)化為可交互原型，用了Figma。有個(gè)支付流程優(yōu)化任務(wù)，原方案動(dòng)畫效果在低性能設(shè)備上卡頓，我改用CSS骨架屏先占位，JS層再算最終位置，動(dòng)畫流暢度明顯。這讓我懂了性能優(yōu)化得考慮多場景。期間發(fā)現(xiàn)公司培訓(xùn)材料過時(shí)，Node版本和ESLint規(guī)則都落后于團(tuán)隊(duì)標(biāo)準(zhǔn)，我就自己整理了一份最新版配置清單分享給導(dǎo)師，后面他們采納了。

實(shí)習(xí)最后兩周做總結(jié)復(fù)盤，我整理了組件化開發(fā)方法論，把通用UI抽成原子組件，比如按鈕、輸入框，現(xiàn)在團(tuán)隊(duì)新項(xiàng)目都在用這套方案。最大的收獲是看懂了企業(yè)級(jí)項(xiàng)目真實(shí)開發(fā)流程，從需求評審到CI/CD部署，比學(xué)校做的小項(xiàng)目復(fù)雜多了。不過公司內(nèi)部溝通有時(shí)效率不高，跨部門需求交接容易信息丟失，我琢磨著能不能用更結(jié)構(gòu)化的文檔模板規(guī)范一下。導(dǎo)師說我的代碼風(fēng)格統(tǒng)一，但還可以再優(yōu)化可讀性，建議多看優(yōu)秀開源項(xiàng)目代碼。這段經(jīng)歷讓我更想往工程化方向發(fā)展，打算后續(xù)系統(tǒng)學(xué)學(xué)自動(dòng)化測試和CI/CD這些。

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

這8周，從2023年7月10日到9月5日，感覺像是踩著真實(shí)世界的節(jié)拍重新校準(zhǔn)了認(rèn)知。開頭確實(shí)懵，面對幾十個(gè)頁面的代碼庫，好幾次都想直接放棄，但硬著頭皮啃下來，尤其是那個(gè)購物車重構(gòu)，前后磨了快兩周，最終把組件復(fù)用率從不到30%提到接近70%，首屏渲染速度也快了不止一星半點(diǎn)，這種用代碼量換性能提升的直觀感受，書本里永遠(yuǎn)學(xué)不到。每天對著瀏覽器開發(fā)者工具調(diào)試到深夜是常事，但看到問題被解決、功能按預(yù)期跑起來時(shí)，那種踏實(shí)感值了。

實(shí)習(xí)最大的價(jià)值在于把學(xué)校學(xué)的碎片化知識(shí)串聯(lián)起來了。之前覺得ReactHooks就是個(gè)語法糖，實(shí)習(xí)中寫異步組件和狀態(tài)管理時(shí)才真正體會(huì)到它的設(shè)計(jì)哲學(xué)，原來是為了解耦和提升性能。團(tuán)隊(duì)那種“代碼走查”的流程也讓我警醒，以前寫完直接提交，現(xiàn)在明白代碼不僅要自己能看懂，還要讓別人也能輕松理解和維護(hù)。這種對質(zhì)量的責(zé)任感，是做學(xué)生時(shí)完全感受不到的。

這次經(jīng)歷讓我對職業(yè)規(guī)劃更清晰了?，F(xiàn)在知道想做好前端，光會(huì)寫模板代碼遠(yuǎn)遠(yuǎn)不夠，得往工程化、自動(dòng)化測試方向深挖。比如那個(gè)支付流程優(yōu)化，如果早點(diǎn)接觸過WebVitals指標(biāo)，可能不會(huì)花那么長時(shí)間在細(xì)節(jié)上。接下來打算系統(tǒng)學(xué)一下CI/CD工具鏈，比如Jenkins或GitHubActions，爭取把實(shí)習(xí)里用Jest寫的單元測試覆蓋率提到95%以上，順便考個(gè)AWS認(rèn)證，給自己加點(diǎn)砝碼。

看著現(xiàn)在互聯(lián)網(wǎng)行業(yè)卷成啥樣，但也覺得技術(shù)迭代太快了，不主動(dòng)學(xué)真會(huì)被淘汰。這次用到的Webpack5、PWA這些，感覺都是未來趨勢。雖然實(shí)習(xí)期間也吐槽過公司培訓(xùn)體系不完善，文檔更新不及時(shí)，但反過來也激勵(lì)我，以后自己做項(xiàng)目得養(yǎng)成自驅(qū)力，主動(dòng)去填坑、去優(yōu)化。從學(xué)生到“準(zhǔn)職場人”，心態(tài)轉(zhuǎn)變挺大的，抗壓能力確實(shí)強(qiáng)了，但也更懂了做產(chǎn)品的不易，以后做技術(shù)得更關(guān)注用戶實(shí)際體驗(yàn)。這8周不是終點(diǎn)，而是新的起點(diǎn)，希望能把實(shí)習(xí)里磨出的硬骨頭，變成未來走得更遠(yuǎn)的底氣。

四、致謝

感謝在實(shí)習(xí)期間給予指導(dǎo)和幫助的導(dǎo)師，那些關(guān)于代碼規(guī)范和項(xiàng)目架