tag 前端工程化

標籤
貢獻32
90
07:55 AM · Nov 03 ,2025
sysu_xuejia 頭像 icecreamlj 頭像 jump_and_jump 頭像 hiisea 頭像 coderleo 頭像 ntksol 頭像 ailvyoudetiebanshao 頭像 dewujishu 頭像 vleedesigntheory 頭像 shuirongshui 頭像 segmentfault 頭像 ruizhengyun 頭像

@前端工程化 / 博客 RSS 訂閱

coderleo 頭像

coderLeo - 手擼Webpack自定義Loader

前言 我們知道 webpack 只能處理 JavaScript 和 Json 文件，面對 CSS、圖片等資源是無能為力的，它需要通過 loader 將這些資源轉換為可處理的模塊。 loader 的本質是一個解析資源的函數模塊，該函數對接受到的內容進行轉換，然後返回 webpack 可處理的資源。 loader的執行順序 loader 可根據執行順序區分為： pre： 前置 loader no

前端工程化 , webpack , 前端 , Javascript

收藏 評論

jump_and_jump 頭像

jump__jump - 前端持久化緩存優化

緩存是提升 web 應用程序有效方法之一，尤其是用户受限於網速的情況下。提升系統的響應能力，降低網絡的消耗。當然，內容越接近於用户，則緩存的速度就會越快，緩存的有效性則會越高。 之前個人寫過 前端 api 請求緩存方案。介紹的了內存中的緩存以及過期邏輯。後續也寫過 手寫一個前端存儲工具庫，該工具利用了適配器處理了不同的存儲介質（內存，IndexedDB, localStorage 等）。 不過，在

性能優化 , 前端工程化 , 前端性能優化 , 緩存 , Javascript

收藏 評論

thjjames 頭像

小皇帝James - 前端腳手架（簡易版）搭建攻略

簡介 腳手架CLI(command-line-interface)是一類快速形成工程化目錄的工具。 開發過程中，如果需要新建前端項目，我們經常都會用到腳手架來創建工程，通過命令行式的交互，可快速選擇選項並完成初始項目的搭建。而CV大法往往會帶來很多重複的刪減工作，且會導致項目分散、架構不統一等等弊端。 常見的主流框架都有自己的腳手架： create-vite @vue/cli create

腳手架cli , 工具 , 前端工程化 , 前端 , Javascript

收藏 評論

jump_and_jump 頭像

jump__jump - 聊聊前端框架的未來 Signals

Signals 在目前前端框架的選型中遙遙領先！ 國慶節前最後一週在 Code Review 新同學的 React 代碼，發現他想通過 memo 和 useCallback 只渲染被修改的子組件部分。事實上該功能在 React 中是難以做到的。因為 React 狀態變化後，會重新執行 render 函數。也就是在組件中調用 setState 之後，整個函數將會重新執行一次。 React 本身做不到

性能優化 , 框架 , 前端工程化 , signal , Javascript

收藏 評論

ntksol 頭像

歐雷 - 是時候反思下 Web 前端了

我以往寫的技術類文章，絕大部分是問題反思、方法論之類的，極少有某個具體技術或工具的介紹與使用教程——除非是我創造的。 眼看着曾經經常針對前端領域問題進行有價值思考與討論的前輩、大佬、同行們接連退隱或沉默，這塊兒的高價值新產出內容越來越少。 因此，我打算自告奮勇地正式接下「對前端領域問題進行思考並儘量產出高價值內容」這個生態位的接力棒。 需要特別説明的是，「前端領域」不侷限於以 HTML、CSS、J

前端工程化 , 前端架構 , 前端框架 , 組件化 , 模塊化

收藏 評論

13592899917 頭像

浪跡天涯小king - 一套代碼打包多個微信小程序，一套代碼打包多個抖音小程序，有需要請到uniapp插件裏面下載享用

走過路過不要錯過，只説一遍，真的很好用，不好用你可以在評論裏面噴我、踩我 uniapp插件地址（https://ext.dcloud.net.cn/plugin?id=15196） 一套代碼打包多個微信小程序 一套代碼打包多個抖音小程序 簡介 此項目是用來免除手動替換小程序appid的煩惱。有些公司會在開發環境是一個appid，測試，準生產，生產又是另一個appid，避免我們每次手動填寫，打包構建

vue.js , 小程序 , 前端工程化 , uniapp , 前端

收藏 評論

shixiaoyuanya 頭像

VX__QNKJSY - 安全芯片是什麼？為什麼可以應用在加密卡上？

安全芯片是指芯片內帶有微處理器CPU、隨機數發生器、硬件密碼算法、存儲單元（包括隨機存儲器RAM、程序存儲器ROM（FLASH）、用户數據存儲器EEPROM）以及芯片操作系統COS的智能芯片，相當於一台微型計算機，不僅具有數據存儲功能，同時具有命令處理和數據安全保護等功能。 安全芯片是集成了密碼算法的專用芯片。密碼技術是保護信息安全的主要手段，它通過對信息進行重新編碼，在保證信息的完整性和正確性的

加密算法 , 前端工程化 , 單片機

收藏 評論

vleedesigntheory 頭像

維李設論 - 從2023看2024前端發展趨勢

前言 流光溯影，縱觀2023全年，整個前端業界呈現出百業凋零之狀，更不乏有“前端已死”等論調甚囂塵上。從全局視角看IT行業，除了AI領域的大語言模型爆發外，整體都鮮有特別亮眼及突出的技術展現。故而，作為IT領域中細分方向的前端行業，加之整體經濟週期的影響，今年的這種形勢也算因之有素。然則，行有不得則需反求諸己，私以為各位前端同學應該以“守正”之心念搏“出新”之機遇。因此，以下個人將分享一些各位前端

2023-年度總結 , 大前端 , 前端工程化 , 前端工程師 , 可視化

收藏 評論

xiangjian_659d190d45a7b 頭像

相見 - HarmonyOS—@Observed裝飾器和@ObjectLink嵌套類對象屬性變化

@Observed裝飾器和@ObjectLink裝飾器：嵌套類對象屬性變化 概述 @ObjectLink和@Observed類裝飾器用於在涉及嵌套對象或數組的場景中進行雙向數據同步： 被@Observed裝飾的類，可以被觀察到屬性的變化； 子組件中@ObjectLink裝飾器裝飾的狀態變量用於接收@Observed裝飾的類的實例，和父組件中對應的狀態變量建立雙向數據綁定。這個實例可以是數組中

華為 , 前端工程化 , Android , harmonyos , 前端

收藏 評論

apifox 頭像

Apifox - 構建卓越 HTML API 的關鍵步驟

作為 JavaScript 開發者，我們經常忘記並不是所有人都像我們一樣瞭解 JavaScript，這被稱為知識的詛咒：當我們精通某個內容的時候，我們就不記得自己作為新人的時候有多麼困惑。我們總是對其他人的能力估計過高，因此我們覺得，自己寫的類庫需要一些 JavaScript 代碼去初始化和配置也很正常。然而，一些用户卻在使用過程中大費周折，他們瘋狂地從文檔中複製粘貼例子並隨機組合這些代碼，直到它

前端工程化 , API , 程序員 , 前端 , Javascript

收藏 評論

songxianling1992 頭像

songxianling1992 - webpack build打包保留歷史版本資源包；解決部署後；客户端白屏問題

背景: taro+h5的項目; 每次build上線的時候; 如果這時候有人正在使用 h5頁面 ；因為jenkins部署是直接替換掉原來的資源；導致 單頁面應用 的頁面找不到之前的資源；出現白屏、點擊無反應、xxx is not defined 的情況 前端打包解決思路 部署的時候不刪除之前的資源包dist；以保證正在使用的客户端用户始終能找到對應的資源。 將打包資源的文件夾名定義為 版

vue.js , 前端工程化 , 打包 , webpack , taro

收藏 評論

kevinzhw 頭像

天涯學館 - 前端工程化實踐：Monorepo與Lerna管理

前端工程化實踐中，Monorepo（單倉庫）管理和Lerna是兩種流行的方式，用於大型項目或組件庫的組織和版本管理。 Monorepo簡介 Monorepo（單倉庫）是指在一個Git倉庫中管理多個相關項目的開發方式。這種方式的優點在於： 集中式管理：所有項目都在一個倉庫中，方便代碼共享、版本同步和協同開發。 模塊化：可以創建獨立的模塊，方便複用和維護。 統一的CI/CD：一次配置，全倉

前端工程化 , lerna , monorepo , 前端 , Javascript

收藏 評論

jump_and_jump 頭像

jump__jump - 利用中介模式開發全局控制器

中介模式定義了一個單獨的（中介）對象，來封裝一組對象之間的交互。將這組對象之間的交互委派給與中介對象交互，來避免對象之間的直接交互。 在實際的項目中，程序由許多對象組成，對象間的交流錯綜複雜。 隨着應用程序的規模增大，對象越來愈多，他們之間的關係也越來複雜。對象間很容易出現相互引用而導致程序無法運行。同時開發者需要改變或者刪除某一個對象時候，需要查找並且改造所有引用到它的對象。這樣一來，改造的成

性能優化 , 前端工程化 , 設計模式 , 中介者模式 , Javascript

收藏 評論

coderleo 頭像

coderLeo - 手擼Webpack自定義Plugin

前言 webpack-plugin 向開發者提供了 webpack 引擎中完整的能力。通過插件擴展 webpack，加入自定義的構建行為，使 webpack 可以執行更廣泛的任務，擁有更強的構建能力。 與 loader 相同，plugin 的本質也是一個模塊（它包含一個apply函數），符合 webpack 的一切皆模塊的理念。 工作原理 webpack 就像一條串行的生產線，要經過一系列處理流程

前端工程化 , webpack , 前端 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - Node.js 構建命令行工具：實現 ls 命令的 -a 和 -l 選項

在日常的前端開發中，我們常常藉助各種基於 Node.js 的腳手架工具來加速項目搭建和維護，比如 create-react-app 可以一鍵初始化一個 React 項目，eslint 則幫助我們保持代碼的整潔和一致。而在公司內部，為了更好地滿足特定業務的需求，我們往往會構建自己的腳手架工具，如自定義的 React 或 Vue 框架、內部使用的代碼檢查工具等。本篇文章來和大家分享一下如何用 Node

node.js , 前端工程化 , 前端 , Javascript

收藏 評論

danieldx 頭像

蛋先生DX - 俯瞰 Monorepo，別一番風景!

寫在最前 本故事簡要地介紹了 Monorepo 的 What 和 Why，重點篇幅在於搭建一個好用的 Monorepo 工程時應該考慮的點。可以作為你在選擇工具時的條件，也可以作為你在搭建 Monorepo 工程時查漏補缺的參考。希望這對你有所幫助，哪怕只是一點點 ^O^ “在這個 AI 內容生成氾濫的時代，依然有一批人"傻傻"堅持原創，如果您能讀到最後，還請點贊或收藏或關注支持下我唄，感謝 (￣

前端工程化 , 前端框架 , monorepo , 前端

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 命令行應用開發初學者指南：腳手架篇、UI 庫和交互工具

在日常的前端開發工作中，我們經常依賴各種命令行工具來提高效率和代碼質量。例如，create-react-app 和 eslint 等工具不僅簡化了項目的初始化過程，還能自動執行代碼檢查和格式化任務。當我們使用這些工具時，它們通常會通過一系列互動式的問答來收集必要的信息，從而根據我們的選擇進行相應的配置和安裝。 以 eslint 工具為例（如下圖所示），當你首次運行 eslint --init 命令

node.js , 前端工程化 , commonjs , 前端 , Javascript

收藏 評論

seanshi_fe 頭像

Sean - npm workspaces 已經夠強了，為何還需要 MonoRepo 方案？

隨着項目規模的增長和模塊化需求的增強，MonoRepo（單一代碼庫）的管理方式正在成為熱門選擇。本文將帶領你瞭解 MonoRepo 的形成背景，探討主流解決方案（如 pnpm workspaces、TurboRepo、Nx 和 Rush），並通過對比分析這些工具的優劣與適用場景，最終幫助你選擇最適合的工具。 MonoRepo 的形成背景 隨着項目複雜度和團隊規模的擴大，傳統的單體代碼庫或多代碼庫（

前端工程化 , 前端 , Javascript

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - 如何解決35歲開發困境?

如何解決35歲開發困境？ 年少的自己總是心懷理想和未來，但眨眼之間我們已經不再年少，我們會在每一次的熬夜後感慨身體大不如前，會在連續工作幾個小時之後就感到疲憊，也會焦慮被更年輕的 人代替，焦慮自己年紀更大了之後怎麼辦。 在我23歲剛實習轉正的時候，我就一直想達成一個目的，就是在30歲之前退休。 我並不想更不能接受我32歲，35歲，40歲還到處找工作的事實。我不能把自己的命運放心的交到別人的手

獨立開發者 , 前端工程化

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - 技術與SEO

每次一提到SEO（搜索引擎優化），就是優化TDK、優化頁面速度、網站標籤語義化、做sitemap、robots、關注內外鏈結構巴拉巴拉..... 毋庸置疑，這些東西就是技術小夥伴們經常關注的東西，或者連這些最基本的東西都不理解。但就僅限於此了嗎？ 問題的關鍵是在於：只瞭解這些沒有意義，你只是達成了SEO的結果，你並不理解SEO的過程。你只是照貓畫虎，如果這時候讓你去自己做一個網站，你能獲得SEO的

獨立開發者 , seo , 前端工程化

收藏 評論

faurewu 頭像

昭福前端語錄 - 一套代碼構建B端企業管理系統跨端方案——從原理到落地解決方案

前言 大家好，這些年來設計系統一直停留在歷史的某個時間點，缺乏創新，缺乏活力，難以有讓人眼前一亮的東西展現，但它並沒有停滯不前，我們一直致力於從一些獨特的角度重新審視和認識設計系統，通過梳理和理解組件的本質，抽象原子化組件，嚴格執行展示層與交互層的分離方式，使組件能夠更好的融合跨端設計，同時深度結合設計語義與前端代碼，確保整個系統的交互和代碼唯一性，目前我們已有一套基礎設施對外開源，歡迎大家的持續

react , 前端工程化 , 前端框架 , 設計原則 , 多端開發

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 提升開發體驗：基於 JSDoc 的 React 項目自動代碼提示方案詳解

需求背景 主管和其他同事基於公司的業務特點，開發了一套自研前端框架。技術選型是 React + JavaScript 的組合，上線後表現還不錯。現在他們想把這個組件庫推廣到其他團隊使用，所以讓我琢磨一下：怎麼能讓使用者用得更順手一點？尤其是能不能在寫代碼的時候有自動提示？ 我調研了一下市面上常見的幾種方案，大致有以下幾類： 把整個項目從 JavaScript 重構為 TypeScript，這樣

前端工程化 , jsdoc , typescript , 前端 , Javascript

收藏 評論

dewujishu 頭像

得物技術 - 前端日誌回撈系統的性能優化實踐｜得物技術

一、前言 在現代前端應用中，日誌回撈系統是排查線上問題的重要工具。然而，傳統的日誌系統往往面臨着包體積過大、存儲無限膨脹、性能影響用户體驗等問題。本文將深入分析我們在@dw/log和@dw/log-upload兩個庫中實施的關鍵性能優化，以及改造過程中遇到的技術難點和解決方案。 核心優化策略概覽： 我們的優化策略主要圍繞三個核心問題： 存儲膨脹問題 - 通過智能清理策略控制本地存儲大小 包體

性能優化 , 大前端 , 前端工程化 , 前端架構 , 前端

收藏 評論

sysu_xuejia 頭像

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.3 gulp

書籍完整目錄 2.3 Gulp 在前端工程化中最重要的就是流程管理，借用 gulp 可以很方便的基於流的方式定義流程任務，並將任務串聯起來，本節中將詳細介紹 gulp ，包括： gulp 介紹 gulp 是什麼 gulp 能夠解決哪些問題 gulp 核心思想和特點 gulp 安裝

gulp , react , 前端工程化 , leanreact , 前端

收藏 評論