vue專案上線的gzip壓縮

阿新 • • 發佈：2020-12-31

開啟gzip配置

gzip可以減小檔案體積，使傳輸速度更快
可以通過伺服器端使用express做gzip壓縮

cnpm install compression -D
const compression = require('compression');
一定要把這一行程式碼，寫在靜態託管之前
app.use(compression());

vue 專案開啟gzip自拍壓縮和部署 nginx 開啟gzip優化效能第一步：在vue專案中安裝依賴並將productionGzip改為true，開啟Gzip壓縮：

開啟gzip配置 gzip可以減小檔案體積，使傳輸速度更快可以通過伺服器端使用express做gzip壓縮

前言大家好啊，我是wangly19，一名前端摸魚小能手。最近忙著開源專案的東西，還有公司專案的迭代問題，導致更新文章的頻率有點低了。也來聊聊我在幹嘛吧。

Node.js簡介 Node.js是一個基於Chrome V8引擎的JavaScript執行環境，用來方便快速地搭建易於擴充套件的網路應用。Node.js使用了一個事件驅動、非阻塞式I/O的模型，使其輕量又高效，非常適合執行在分散式裝置的資料密

gzip 是 GNUzip 的縮寫，最早用於 UNIX 系統的檔案壓縮。HTTP 協議上的 gzip 編碼是一種用來改進 web 應用程式效能的技術，web 伺服器和客戶端（瀏覽器）必須共同支援 gzip。目前主流的瀏覽器，Chrome，firefox，I

①將vue專案裡的程式碼打包。打包目的：瀏覽器不認識vue檔案和vue裡的template標籤和引入模組的js程式碼。所以要打包，將vue專案轉為純粹的html、js、css檔案。

技術標籤：vue-clicompression-webpack-pluginvuejavascript vue-cli3構建的專案使用compression-webpack-plugin 進行GZip壓縮

1.安裝依賴： compression-webpack-plugin是一個非常好用的壓縮外掛，適用於vue-cli版本2以上，

　　影響網頁響應速度的因素有很多，例如：http請求次數太多、伺服器本身處理請求太久、請求內容太大、JS指令碼執行耗時過長、瀏覽器迴流重繪等。網站頁面的響應速度與使用者體驗息息相關，直接影響到使用者是否願意

為了減少資料在網路中的傳輸量，從而減少傳輸時長，增加使用者體驗，瀏覽器大都是支援Gzip壓縮技術的，http的請求頭 Accept-Encoding:gzip, deflate 就表示這次請求可以接受Gzip壓縮後的資料，圖片不要進行壓縮，因為

為了減少資料在網路中的傳輸量，從而減少傳輸時長，增加使用者體驗，瀏覽器大都是支援Gzip壓縮技術的，http的請求頭 Accept-Encoding:gzip,deflate 就表示這次請求可以接受Gzip壓縮後的資料，圖片不要進行壓縮，因為

　　在你的專案使用了Vue的路由懶載入、Vue使用CDN引用專案元件，減少專案體積後，還是覺得專案載入速度慢，效果不盡如人意的時候，還有一個“瘦身專案”可以完成，那就是利用nginx和webpack來使用gzip壓縮

在你的專案使用了Vue的路由懶載入、Vue使用CDN引用專案元件，減少專案體積後，還是覺得專案載入速度慢，效果不盡如人意的時候，還有一個“瘦身專案”可以完成，那就是利用nginx和webpack來使用gzip壓縮功能

專案優化上線 1.專案優化 ①頁面進度條效果執行依賴->nprogress 匯入包和樣式 // [main.js]

一.專案優化策略 1.生成打包報告 2.第三方庫啟用CDN 3.Element-ui元件按需載入 4.首頁內容定製

技術標籤：vue webpack壓縮程式碼前言日常開發中，Vue框架通常都會使用Webpack進行構建，隨著專案不斷迭代，專案逐漸變得龐大，然而專案的構建速度隨之變得緩慢，於是對Webpack構建進行優化變得刻不容緩。通

技術標籤：前端開發原因：打包後的dist沒有放到伺服器的根目錄下。解決方案：vue-cli官方檔案給出的方法如下

目錄前言一.請求內容太大解決方案：CDN引入壓縮請求資源一.http請求次數太多解決方案：總結前言

環境 win10 x64 npm 6.14.13 node 14.17.3 vue 2.6.11 安裝外掛 cnpm install [email protected] -S

1、安裝依賴並引入　　npm install jszip --save 　　npm install file-saver --save 　　import JSZip from \'jszip\'