博客 / 列表

南玖 - pnpm才是前端工程化項目的未來

前言 相信小夥伴們都接觸過npm/yarn，這兩種包管理工具想必是大家工作中用的最多的包管理工具，npm作為node官方的包管理工具，它是隨着node的誕生一起出現在大家的視野中，而yarn的出現則是為了解決npm帶來的諸多問題，雖然yarn提高了依賴包的安裝速度與使用體驗，但它依舊沒有解決npm的依賴重複安裝等致命問題。pnpm的出現完美解決了依賴包重複安裝的問題，並且實現了yarn帶來的所有優

工程化 , npm , 前端

南玖 - 【webpack系列】從核心概念到上手配置

前言 作為前端開發者，相信大家或多或少都接觸過webpack，現如今webpack已經滲透在了前端的各個方面，所以我們有必要來了解並學習webpack，webpack 是一種用於構建 JavaScript 應用程序的靜態模塊打包器，它能夠以一種相對一致且開放的處理方式，加載應用中的所有資源文件（圖片、CSS、視頻、字體文件等），並將其合併打包成瀏覽器兼容的 Web 資源文件。webpack相比其它

工程化 , webpack , 前端 , Javascript

南玖 - 【webpack系列】從基礎配置到掌握進階用法

前言 本篇文章將介紹一些webpack的進階用法，演示內容繼承自上一篇文章的內容，所以沒看過上一篇文章的建議先學習上一篇內容再閲讀此篇內容，會更有利於此篇的學習～ 文件指紋 文件指紋指的是打包輸出的文件名後綴，一般用來做版本管理、緩存等 webpack的指紋策略有三種：hash、chunkhash、contenthash，它們之間最主要的區別就是每種hash影響的範圍不同。 佔位符 webpac

工程化 , webpack , Javascript

南玖 - Docker從入門到部署項目

Docker概念 Docker是一個開源的應用容器引擎，它是基於Go語言並遵從Apache2.0協議開源。Docker可以讓開發者打包他們的應用以及依賴包到一個輕量級、可移植的容器中，然後發佈到任何流行的linux機器上，也可以實現虛擬化。通過容器可以實現方便快速並且與平台解耦的自動化部署方式，無論你部署時的環境如何，容器中的應用程序都會運行在同一種環境下。並且它是完全使用沙箱機制，相互之間是隔離

容器 , 工程化 , Docker

南玖 - 【性能監控】如何有效監測網頁靜態資源大小？

前言 作為前端人員肯定經常遇到這樣的場景：需求剛上線，產品拿着手機來找你，為什麼頁面打開這麼慢呀，心想自己開發的時候也有注意性能問題呀，不可能會這麼誇張。那沒辦法只能排查下是哪一塊影響了頁面的整體性能，打開瀏覽器控制枱一看，頁面上的這些配圖每張都非常大，心想這些配圖都這麼大，頁面怎麼快，那麼我們有沒有辦法監測頁面上的這些靜態資源大小，從而避免這種情況的發生。 Performance Perform

性能監控 , 工程化 , 前端 , Javascript

南玖 - 淺析Vite本地構建原理

前言 隨着Vue3的逐漸普及以及Vite的逐漸成熟，我們有必要來了解一下關於vite的本地構建原理。 對於webpack打包的核心流程是通過分析JS文件中引用關係，通過遞歸得到整個項目的依賴關係，並且對於非JS類型的資源，通過調用對應的loader將其打包編譯生成JS 代碼，最後再啓動開發服務器。 瞭解到webpack的耗時主要花費在打包上，Vite選擇跳過打包，直接以以 原生 ESM 方式提供源

vite , 工程化 , 前端

南玖 - Vite本地構建：手寫核心原理

前言 接上篇文章，我們瞭解到vite的本地構建原理主要是：啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想，我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目： 項目結構如上，服務使用koa搭建，bin指定cli可執行文件的位置 #!/usr/bin/env node

vite , 工程化 , 前端 , Javascript

南玖 - 深入瞭解Vite：依賴預構建原理

前言 前面我們有提到Vite在開發階段，提倡的是一個no-bundle的理念，不必與webpack那樣需要先將整個項目進行打包構建。但是no-bundle的理念只適合源代碼部分（我們自己寫的代碼），vite會將項目中的所有模塊分為依賴與源碼兩部分。 依賴： 指的是一些不會變動的一些模塊，如：node_modules中的第三方依賴，這部分代碼vite會在啓動本地服務之前使用esbuild進行預構建。

vite , 工程化 , 原理 , 前端

南玖 - V8是如何執行JavaScript代碼的？

前言 一般來講，電腦是不能直接運行我們的javascript代碼的，它需要一個翻譯程序將人類能夠理解的編程語言 JavaScript，翻譯成機器能夠理解的機器語言。目前市面上有很多種 JavaScript 引擎，諸如 SpiderMonkey、V8、JavaScriptCore 等。而由谷歌開發的開源項目 V8 是當下使用最廣泛的 JavaScript 虛擬機，全球有超過 25 億枱安卓設備，而這

v8 , 前端 , Javascript

南玖 - 一文搞懂V8引擎的垃圾回收機制

前言 我們平時在寫代碼的過程中，好像很少需要自己手動進行垃圾回收，那麼V8是如何來減少內存佔用，從而避免內存溢出而導致程序崩潰的情況的。為了更高效地回收垃圾，V8引入了兩個垃圾回收器，它們分別針對不同場景進行工作。 如果這篇文章有幫助到你，❤️關注+點贊❤️鼓勵一下作者，文章公眾號首發，關注 前端南玖 第一時間獲取最新文章～ 垃圾從何而來 我們先來搞清楚這些‘垃圾’是怎麼產生的 不管使用哪一

v8 , 前端 , Javascript

南玖 - 深入理解Base64編碼原理

前言 上篇文章有涉及到Base64編碼的內容，今天我們再來詳細瞭解一下Base64的編碼原理以及應用場景。 通過這篇文章你能夠學習到： 什麼是Base64，為什麼需要Base64？ Base64的編碼原理 Base64的應用場景 什麼是Base64？ Base64是一種用於傳輸8bit字節數據的編碼方式，Base64 的字符集包含 64 個字符（A-Z、a-z、0-9、+、/）以及補

編碼 , base64 , 前端 , Javascript

南玖 - 從Babel開始認識AST抽象語法樹

前言 AST抽象語法樹想必大家都有聽過這個概念，但是不是隻停留在聽過這個層面呢。其實它對於編程來講是一個非常重要的概念，當然也包括前端，在很多地方都能看見AST抽象語法樹的影子，其中不乏有vue、react、babel、webpack、typeScript、eslint等。簡單來説但凡需要編譯的地方你基本都能發現AST的存在。 babel是用來將javascript高級語法編譯成瀏覽器能夠執行的語

ast , babel , 前端 , Javascript

南玖 - 使用原生 cookieStore 方法，讓 Cookie 操作更簡單

前言 對於前端來講，我們在操作cookie時往往都是基於document.cookie，但它有一個缺點就是操作複雜，它並沒有像localStorage那樣提供一些get或set等方法供我們使用。對與cookie的操作一切都是基於字符串來進行的。為了讓cookie的操作更簡便， Chrome87率先引入了cookieStore方法。 document.cookie document.cookie可以

cookie , 前端 , Javascript

南玖 - 亞像素渲染：瀏覽器如何處理小數像素的渲染？

前言 最近遇到一個這樣的問題，在一些機型上的loading轉圈動畫看起來有點抖，轉起來像個橢圓，心想會不會是這個icon寬高不同造成的，但看了一眼代碼裏面寬高寫的是一樣，按理來説這個loading應該是一個正圓，旋轉起來不應該抖才是的。 比如這樣： div class="w-20px h-20px border-rd-50% loading"/div 寬高相等的一個正圓，旋轉起來看着怪怪的。事實

渲染 , 瀏覽器 , 像素 , 前端 , Javascript

南玖 - 瀏覽器如何確定最終的CSS屬性值？解析計算優先級與規則

前言 上篇文章中有提到CSS值的處理過程，但如果想要確定一個元素的最終樣式值可以不需要這麼多步。實際上我們寫的任何一個標籤元素無論寫沒寫樣式，它都會有一套完整的樣式。理解這一點非常重要‼️ 比如：一個簡單的p標籤 打開瀏覽器控制枱，選中元素，切換到computed選項，勾選show all，這裏就能夠看到元素的所有CSS樣式，儘管你什麼樣式也沒寫，它們也是有默認值的。任何標籤都是這樣，只不過默認

瀏覽器 , Css , 前端

南玖 - 通過performance面板驗證瀏覽器資源加載與渲染機制

前言 一個網頁的核心由HTML、CSS和JavaScript組成，三者協同工作以呈現內容並實現交互。但瀏覽器如何解析這些資源？加載順序如何影響用户體驗？讀完本本文你將徹底弄懂以下核心知識 為什麼需要生成DOM樹？ CSS是否會阻塞HTML解析？是否阻塞頁面渲染？ JavaScript是否會阻塞HTML解析？ JavaScript的異步加載機制如何影響解析過程？ 如何通過performa

渲染 , 瀏覽器 , 面試 , 前端

南玖 - Safari 隱私模式下，URL 參數為何神秘消失？

前言 最近在排查Safari在隱私模式下頁面參數丟失的問題，如果通過Safari直接打開B頁面，此時在B頁面可以正常獲取到頁面鏈接上的參數，但是如果Safari先打開A頁面，然後通過A頁面再跳轉到B頁面（A、B頁面部署在不同域名下），此時的B頁面通過JS就獲取不到鏈接上的參數了🤔，這樣就會導致一些依賴頁面參數的功能出現異常！ 問題演示 B頁面鏈接格式如下：xx.qq.com?au=xx... 通

safari , 瀏覽器 , 前端 , url

南玖 - 小程序如何實現跨頁面通信

前言 最近有很多同學問，小程序裏面如何進行跨頁面通信。看了下之前的老代碼，基本都是基於onShow或者localStorage。雖然可以實現，但是並不怎麼優雅。 今天就來聊一聊，小程序的跨頁面通信的幾種實現方案。或許會有你想要的方案（優雅...） 方式一：onShow + localStorage 業務場景：頁面一未登錄跳轉至登錄頁面，登錄成功後返回頁面一，頁面一需要更新當前登錄態 !-- 頁面一

小程序 , taro , 前端

南玖 - Base64編碼的“暗坑”：解密失敗？可能是這些原因！

前言 最近開發過程中遇到了關於使用base64加密傳輸遇到的神奇問題。需求就是用户的id在鏈接上露出時需要加密處理，於是後端把下發的用户id改成了base64加密處理後下發了，前端只需要把加密後的用户id原樣傳給後端就行。就是這個看似簡單的流程，前端啥也沒幹只是原樣透傳，但後端有概率拿到的用户id不對。 問題描述 本地寫個後端服務模擬當時的情景： 後端框架：nest @Get('getUserIn

urlencode , base64 , 前端 , Javascript

南玖 - 漸進式圖片加載：提升前端用户體驗的藝術

前言 關於前端的性能及體驗問題，圖片的加載絕對是重中之重，尤其是在一些有着許多大圖的頁面，在網絡不穩定或稍慢的時候，我們經常能夠看到頁面中圖片的位置是一片空白，等圖片加載完成才開始慢慢渲染，在這段時間對用户的體驗其實是非常不友好的。 那麼我們應該如何來進行優化呢？ 大家想説的是不是：把圖片壓縮一下不就好了？是的，圖片壓縮是我們前端開發過程必備的一步，但是光靠圖片壓縮並不能解決所有的圖片體驗問題，有

性能優化 , 圖片處理 , 用户體驗 , 前端

南玖 - 開發自定義Taro插件解決跨平台難題

前言 在Taro項目開發中，難免會遇到需要混合編譯的場景，一般來講Taro可以使用原生模塊、原生項目也可以使用Taro的模塊內容。官方也確實説了Taro 支持使用小程序原生的頁面、組件和插件。 比如Taro使用原生頁面，我們只需要在app.config.ts文件中加上原生頁面的路由，然後項目中就可以直接以小程序原生的開發模式開發該頁面。 使用原生頁面（weapp) 這種模式對於微信小程序確實是可以

小程序 , webpack , taro , 前端

南玖 - Taro4.0支持使用Vite構建

前言 早在Taro3.5的版本發佈時，Taro團隊就表示將會在接下來的3.6版本落地對Vite的支持。 但在3.6的版本中根本就沒看到Vite的身影，隨着社區對Vite的呼聲越來越高，終於在Taro4.0beta版本中支持了這一功能！ 目前 Taro 在 Vite 編譯系統適配方面，優先支持了小程序、H5 和鴻蒙三端。 但仔細一想🤔，H5支持使用Vite編譯可以理解，但小程序是隻支持Commo

vite , taro , 前端

南玖 - 基於taro搭建小程序多項目框架

前言 為什麼需要這樣一個框架，以及這個框架帶來的好處是什麼？ 從字面意思上理解：該框架可以用來同時管理多個小程序，並且可以抽離公用組件或業務邏輯供各個小程序使用。當你工作中面臨這種同時維護多個小程序的業務場景時，可以考慮使用這種模式。靈感來自webpack的多項目打包構建 起步 首先你得先安裝好taro腳手架，然後基於該腳手架生成一個taro項目 初始化taro項目 taro init miniA

小程序 , taro , 前端

南玖 - 熟悉又陌生的package.json

前言 隨着前端的不斷髮展，package.json可謂是在前端項目中無處不在，它不僅在項目根目錄會有，而且在 node_modules 中也存在。那麼這個文件到底是幹嘛的，又有什麼作用？很多人對它的認識是不是隻停留在dependencies、devDependencies項目依賴列表，或者是script項目的各種腳本指令等，實際上它能做的事情遠不止這些。 創建package.json 現如今當你使

package.json , npm , 前端