2. 程式人生 > >webpack 優化筆記

webpack 優化筆記

阿新 • • 發佈：2018-12-10

優化可以從哪些方面入手

1、優化開發體驗

  • 優化構建速度，專案龐大時構建的耗時比較久
  • 優化使用體驗，通過自動化手段完成一些重複工作

2、優化輸出質量

  • 減少使用者感知到的載入時間，即首屏載入時間
  • 提升流暢度，即提升程式碼效能

webpack 可以做哪些優化

1、縮小檔案搜尋範圍webpack 在啟動後會從配置的 Entry 出發，解析出檔案中的匯入語句，再遞迴解析，在遇到匯入語句時，webpack 會做一下操作

  • 尋找對應的匯入檔案
  • 使用配置中的 Loader 去處理檔案，例如解析 js 檔案用的 babel-loader

1.1 優化 Loader配置可通過 test, include,exclude 三個配置進行優化

clipboard.png

1.2 優化 resolve.modules 配置webpack 在啟動後會從配置的入口模組出發找出所有依賴的模組，resolve 配置 webpack 如何尋找模組對應的檔案。resolve.modules 的預設值是 ['node_modules'], 指先去當前目錄的./node_modules 目錄下找對應的模組，如果沒有找到，就去上一級目錄../node_modules, 層層往上找。一般我們安裝的第三方目錄都會放在專案的根目錄 ./node_modules 目錄下，可以指明第三方模組的絕對路徑，減少查詢路徑

clipboard.png

2、使用CommonsChunkPlugin分割程式碼對於多入口，將公共模組拆出來，最終合成的檔案能夠在最開始的時候載入一次，便存起來到快取中供後續使用，不需要每次訪問一個新頁面時，再去載入一個更大的檔案

clipboard.png

3、使用動態連結庫檔案將網頁依賴的基礎模組抽離出來，打包到一個單獨的動態連結庫中，一個動態連結庫可以包含多個模組；當需要匯入的模組存在於某個動態連結庫時，這個模組不會被再次打包，而是去動態連結庫中獲取

構建動態連結庫

clipboard.png

引用動態連結庫

clipboard.png

4、使用Happypack由於 JavaScript 是單執行緒模型，要想發揮多核 CPU 的能力，只能通過多程序去實現，而無法通過多執行緒實現。HappyPack 能讓 Webpack 同時間做多件事，它把任務分解給多個子程序去併發的執行，子程序處理完後再把結果傳送給主程序。

優化可以從哪些方面入手

1、優化開發體驗

  • 優化構建速度，專案龐大時構建的耗時比較久
  • 優化使用體驗，通過自動化手段完成一些重複工作

2、優化輸出質量

  • 減少使用者感知到的載入時間，即首屏載入時間
  • 提升流暢度，即提升程式碼效能

webpack 可以做哪些優化

1、縮小檔案搜尋範圍webpack 在啟動後會從配置的 Entry 出發，解析出檔案中的匯入語句，再遞迴解析，在遇到匯入語句時，webpack 會做一下操作

  • 尋找對應的匯入檔案
  • 使用配置中的 Loader 去處理檔案，例如解析 js 檔案用的 babel-loader

1.1 優化 Loader配置可通過 test, include,exclude 三個配置進行優化

clipboard.png

1.2 優化 resolve.modules 配置webpack 在啟動後會從配置的入口模組出發找出所有依賴的模組，resolve 配置 webpack 如何尋找模組對應的檔案。resolve.modules 的預設值是 ['node_modules'], 指先去當前目錄的./node_modules 目錄下找對應的模組，如果沒有找到，就去上一級目錄../node_modules, 層層往上找。一般我們安裝的第三方目錄都會放在專案的根目錄 ./node_modules 目錄下，可以指明第三方模組的絕對路徑，減少查詢路徑

clipboard.png

2、使用CommonsChunkPlugin分割程式碼對於多入口，將公共模組拆出來，最終合成的檔案能夠在最開始的時候載入一次，便存起來到快取中供後續使用，不需要每次訪問一個新頁面時，再去載入一個更大的檔案

clipboard.png

3、使用動態連結庫檔案將網頁依賴的基礎模組抽離出來，打包到一個單獨的動態連結庫中，一個動態連結庫可以包含多個模組；當需要匯入的模組存在於某個動態連結庫時，這個模組不會被再次打包，而是去動態連結庫中獲取

構建動態連結庫

clipboard.png

引用動態連結庫

clipboard.png

4、使用Happypack由於 JavaScript 是單執行緒模型，要想發揮多核 CPU 的能力，只能通過多程序去實現，而無法通過多執行緒實現。HappyPack 能讓 Webpack 同時間做多件事，它把任務分解給多個子程序去併發的執行，子程序處理完後再把結果傳送給主程序。

clipboard.png

注：HappyPack 對file-loader、url-loader 支援的不友好，所以不建議對該loader使用。

相關推薦

webpack 優化筆記

優化可以從哪些方面入手 1、優化開發體驗 優化構建速度，專案龐大時構建的耗時比較久 優化使用體驗，通過自動化手段完成一些重複工作 2、優化輸出質量 減少使用者感知到的載入時間，即首屏載入時間 提升流暢度，即提升程式碼效能 webpack 可以做哪些優化 1、

Webpack學習筆記九 webpack優化總結

rules 直接 new maxsize 正則表達式 parse 字節 提高 UNC webpack 優化筆記 webpack4 自帶的優化包括 swingTree(搖擺樹)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 裏面有

CMU Convex Optimization(凸優化)筆記1--凸集和凸函數

lock element lane 向量 最大化 intersect sca 對數 adr CMU凸優化筆記--凸集和凸函數 結束了一段時間的學習任務，於是打算做個總結。主要內容都是基於CMU的Ryan Tibshirani開設的Convex Optimization課程做

Mysql性能優化筆記

建立 text lte 觸發 解決方法 基於 blob 多個 慢日誌 一，索引 1.Innodb索引使用的是B+樹 2.盡量簡化where條件，比如不要出現 where id + 3 = 5,這無法使用索引 3.索引很大時，可以冗余一列來模擬哈希索引 4.小的表不需要使用索

webpack學習筆記一

官方 utf-8 call reat modules public 總結 asc pack webpack、gulp、grunt是前端打包功能工具；因為已經學習了gulp，而最近發現webpack很火，於是著手學習webpack。本篇是webpack學習筆記系列的第一篇，歡

徹底解決 Intellij IDEA 卡頓 優化筆記,重要的快捷鍵

引入 編譯 今天 ctu ons 文件 使用 com 效率提升 由於工作中經常出現分支各種切換，使用Eclipse便不再像以前那麽舒服了，不停的修改工作空間，每次修改完工作空間又是一堆一堆的個性化設置，來回的切換，真的很累。我們做軟件的，怎麽能不去嘗試新鮮的呢，畢竟，再難走

nginx優化筆記（keepalive、https等）

nginx 和平 listen real 簡單的 服務器 article sid 發送 一、nginx之tcp_nopush、tcp_nodelay、sendfile 1、TCP_NODELAY你怎麽可以強制 socket 在它的緩沖區裏發送數據？一個解決方案是 TCP 堆

webpack學習筆記

script start import 服務 修改 css all sets 打包 1. 全局安裝webpack cnpm install --save-dev webpack 2. 初始化 cnpm init cnpm install --save-dev webpack

如何使用webpack優化首屏渲染時間

什麽 性能優化 根路徑 方法 減少 limit 分享 但我 以及 其實說到性能優化，他的範圍太廣了，今天我們就只聊一聊通過webpack配置減少http請求數量這個點吧。 簡單說下工作中遇到的問題吧，我們做的一個項目中首頁用了十多張圖片，每張圖片都是一個靜態資源，所以都會有

webpack優化之code splitting

common try bpa 有一個 出了 循環引用 head 請求 too 作為當前風頭正盛的打包工具，webpack風靡前端界。確實作為引領了一個時代的打包工具，很多方面都帶來了顛覆性的改進，讓我們更加的感受到自動化的快感。不過最為大家詬病的一點就是用起來太難了。 要想

webpack學習筆記-2-file-loader 和 url-loader

多個 webp 們的 dirname data dir http請求 文件中 class 一 .前言 如果我們希望在頁面引入圖片（包括img的src和background的url）。當我們基於webpack進行開發時，引入圖片會遇到一些問題。 其中一個就

淺談webpack優化

web 如果 區分 針對 過程 工作 就是 需要 pos webpack優化方案 1. 優化開發體驗 1-1. 加快構建速度 ① 縮小文件搜索範圍 由於 Loader 對文件的轉換操作很耗時，需要讓盡可能少的文件被 Loader 處理，用include和

webpack學習筆記（一）

chunk 編碼 自動配置 ava 如果 但是 col bash 進行 　　webpack顧名思義是打包工具。當前編碼界，早已不再是最初的那種一個html引用一個css和一個js來完成所有的頁面渲染和處理的模式了，尤其是前端，更加偏向組件化模塊化，一個完整的頁面是由不知道多

webpack學習筆記--區分環境

實現 size clas 並且 模塊 scrip shell 腳本 正常 uglify 為什麽需要區分環境 在開發網頁的時候，一般都會有多套運行環境，例如： 在開發過程中方便開發調試的環境。 發布到線上給用戶使用的運行環境。 這兩套不同的環境雖然都是由同

Apache Hawq--優化筆記

date類型 port 天數 -- dpa lai acc watermark fff 優化工作： 數據表分區盡量采用數值類型字段，如Date類型轉換為距離1970-01-01的絕對天數。 SQL語法：盡量避免between and 的使用(查看查詢計劃，影響不大)，多個

webpack學習筆記(1)--webpack.config.js

config 性能 引用 打包成 conf 交互 ocs bpa 重要 主要的信息都是來自於下方所示的網站 https://webpack.docschina.org/configuration 首先總結下個人理解的webpack是一個模塊打包器,有以下幾個優點 1.能將多

效能優化筆記

三方面：Android的渲染機制，記憶體與GC，電量優化。 渲染優化： UI達到60fps需要再16ms內完成繪製 工具：開啟手機裡的開發者選項，選擇Profile GPU Rendering，選中On screen as bars的選項。

MDK編譯優化筆記

func 視圖 緩沖區 The section 編譯器 自動 靜態 ram 在一次使用MDk的編譯優化等級比較高的時候發現編譯不優化時功能正常，開了優化等級02就出現異常，調試中看了很多博客總結一下。 一個變量，如果你的主程序要用到，同時中斷還要用到，要加volatile

webpack學習筆記-demo1(參照阮一峰的demo)

https://github.com/ruanyf/webpack-demos  程式碼原地址 How to use 1, nstall Webpack and webpack-dev-server globally. $ npm i

web前端之webpack優化

由於前端的快速發展，相關工具的發展速度也是相當迅猛，各大框架例如vue,react都有自己優秀的腳手架工具來幫助我們快速啟動一個新專案，也正式因為這個原因，我們對於腳手架中最關鍵的一環webpack相關的優化知之甚少，腳手架基本上已經為我們做好了相關的開發準備，但是當我們想要做一些定製化的優化操作時