pnpm才是前端工程化項目的未來
前言 相信小夥伴們都接觸過npm/yarn，這兩種包管理工具想必是大家工作中用的最多的包管理工具，npm作為node官方的包管理工具，它是隨着node的誕生一起出現在大家的視野中，而yarn的出現則是為了解決npm帶來的諸多問題，雖然yarn提高了依賴包的安裝速度與使用體驗，但它依舊沒有解決npm的依賴重複安裝等致命問題。pnpm的出現完美解決了依賴包重複安裝的問題，並且實現了yarn帶來的所有優
南玖 動態日志
動態
列表
【webpack系列】從核心概念到上手配置
前言 作為前端開發者，相信大家或多或少都接觸過webpack，現如今webpack已經滲透在了前端的各個方面，所以我們有必要來了解並學習webpack，webpack 是一種用於構建 JavaScript 應用程序的靜態模塊打包器，它能夠以一種相對一致且開放的處理方式，加載應用中的所有資源文件（圖片、CSS、視頻、字體文件等），並將其合併打包成瀏覽器兼容的 Web 資源文件。webpack相比其它
【webpack系列】從基礎配置到掌握進階用法
前言 本篇文章將介紹一些webpack的進階用法，演示內容繼承自上一篇文章的內容，所以沒看過上一篇文章的建議先學習上一篇內容再閲讀此篇內容，會更有利於此篇的學習～ 文件指紋 文件指紋指的是打包輸出的文件名後綴，一般用來做版本管理、緩存等 webpack的指紋策略有三種：hash、chunkhash、contenthash，它們之間最主要的區別就是每種hash影響的範圍不同。 佔位符 webpac
Docker從入門到部署項目
Docker概念 Docker是一個開源的應用容器引擎，它是基於Go語言並遵從Apache2.0協議開源。Docker可以讓開發者打包他們的應用以及依賴包到一個輕量級、可移植的容器中，然後發佈到任何流行的linux機器上，也可以實現虛擬化。通過容器可以實現方便快速並且與平台解耦的自動化部署方式，無論你部署時的環境如何，容器中的應用程序都會運行在同一種環境下。並且它是完全使用沙箱機制，相互之間是隔離
【性能監控】如何有效監測網頁靜態資源大小？
前言 作為前端人員肯定經常遇到這樣的場景：需求剛上線，產品拿着手機來找你，為什麼頁面打開這麼慢呀，心想自己開發的時候也有注意性能問題呀，不可能會這麼誇張。那沒辦法只能排查下是哪一塊影響了頁面的整體性能，打開瀏覽器控制枱一看，頁面上的這些配圖每張都非常大，心想這些配圖都這麼大，頁面怎麼快，那麼我們有沒有辦法監測頁面上的這些靜態資源大小，從而避免這種情況的發生。 Performance Perform
淺析Vite本地構建原理
前言 隨着Vue3的逐漸普及以及Vite的逐漸成熟，我們有必要來了解一下關於vite的本地構建原理。 對於webpack打包的核心流程是通過分析JS文件中引用關係，通過遞歸得到整個項目的依賴關係，並且對於非JS類型的資源，通過調用對應的loader將其打包編譯生成JS 代碼，最後再啓動開發服務器。 瞭解到webpack的耗時主要花費在打包上，Vite選擇跳過打包，直接以以 原生 ESM 方式提供源
Vite本地構建：手寫核心原理
前言 接上篇文章，我們瞭解到vite的本地構建原理主要是：啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想，我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目： 項目結構如上，服務使用koa搭建，bin指定cli可執行文件的位置 #!/usr/bin/env node
深入瞭解Vite：依賴預構建原理
前言 前面我們有提到Vite在開發階段，提倡的是一個no-bundle的理念，不必與webpack那樣需要先將整個項目進行打包構建。但是no-bundle的理念只適合源代碼部分（我們自己寫的代碼），vite會將項目中的所有模塊分為依賴與源碼兩部分。 依賴： 指的是一些不會變動的一些模塊，如：node_modules中的第三方依賴，這部分代碼vite會在啓動本地服務之前使用esbuild進行預構建。
V8是如何執行JavaScript代碼的？
前言 一般來講，電腦是不能直接運行我們的javascript代碼的，它需要一個翻譯程序將人類能夠理解的編程語言 JavaScript，翻譯成機器能夠理解的機器語言。目前市面上有很多種 JavaScript 引擎，諸如 SpiderMonkey、V8、JavaScriptCore 等。而由谷歌開發的開源項目 V8 是當下使用最廣泛的 JavaScript 虛擬機，全球有超過 25 億枱安卓設備，而這
一文搞懂V8引擎的垃圾回收機制
前言 我們平時在寫代碼的過程中，好像很少需要自己手動進行垃圾回收，那麼V8是如何來減少內存佔用，從而避免內存溢出而導致程序崩潰的情況的。為了更高效地回收垃圾，V8引入了兩個垃圾回收器，它們分別針對不同場景進行工作。 如果這篇文章有幫助到你，❤️關注+點贊❤️鼓勵一下作者，文章公眾號首發，關注 前端南玖 第一時間獲取最新文章～ 垃圾從何而來 我們先來搞清楚這些‘垃圾’是怎麼產生的 不管使用哪一
深入理解Base64編碼原理
前言 上篇文章有涉及到Base64編碼的內容，今天我們再來詳細瞭解一下Base64的編碼原理以及應用場景。 通過這篇文章你能夠學習到： 什麼是Base64，為什麼需要Base64？ Base64的編碼原理 Base64的應用場景 什麼是Base64？ Base64是一種用於傳輸8bit字節數據的編碼方式，Base64 的字符集包含 64 個字符（A-Z、a-z、0-9、+、/）以及補
從Babel開始認識AST抽象語法樹
前言 AST抽象語法樹想必大家都有聽過這個概念，但是不是隻停留在聽過這個層面呢。其實它對於編程來講是一個非常重要的概念，當然也包括前端，在很多地方都能看見AST抽象語法樹的影子，其中不乏有vue、react、babel、webpack、typeScript、eslint等。簡單來説但凡需要編譯的地方你基本都能發現AST的存在。 babel是用來將javascript高級語法編譯成瀏覽器能夠執行的語
使用原生 cookieStore 方法，讓 Cookie 操作更簡單
前言 對於前端來講，我們在操作cookie時往往都是基於document.cookie，但它有一個缺點就是操作複雜，它並沒有像localStorage那樣提供一些get或set等方法供我們使用。對與cookie的操作一切都是基於字符串來進行的。為了讓cookie的操作更簡便， Chrome87率先引入了cookieStore方法。 document.cookie document.cookie可以
亞像素渲染：瀏覽器如何處理小數像素的渲染？
前言 最近遇到一個這樣的問題，在一些機型上的loading轉圈動畫看起來有點抖，轉起來像個橢圓，心想會不會是這個icon寬高不同造成的，但看了一眼代碼裏面寬高寫的是一樣，按理來説這個loading應該是一個正圓，旋轉起來不應該抖才是的。 比如這樣： div class="w-20px h-20px border-rd-50% loading"/div 寬高相等的一個正圓，旋轉起來看着怪怪的。事實
瀏覽器如何確定最終的CSS屬性值？解析計算優先級與規則
前言 上篇文章中有提到CSS值的處理過程，但如果想要確定一個元素的最終樣式值可以不需要這麼多步。實際上我們寫的任何一個標籤元素無論寫沒寫樣式，它都會有一套完整的樣式。理解這一點非常重要‼️ 比如：一個簡單的p標籤 打開瀏覽器控制枱，選中元素，切換到computed選項，勾選show all，這裏就能夠看到元素的所有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... 通