vue項目優(yōu)化--使用CDN和Gzip

番茄西紅柿發(fā)布于2019-07-16 14:29 / 1393人閱讀

摘要：使用構建的項目，在打包發(fā)布的時候，發(fā)現(xiàn)打包后的文件體積很大，使用分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。具體實現(xiàn)以我個人項目為例我的項目中引入了以下模塊。

使用vue-cli構建的vue項目，在打包發(fā)布的時候，發(fā)現(xiàn)打包后的文件體積很大，使用webpack-bundle-analyzer分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。第三方的依賴文件可以使用cdn外鏈的方式引入，這樣就能大大縮小項目文件的體積。

具體實現(xiàn)（以我個人項目為例）
我的項目中引入了以下模塊vue vue-router vuex axios moment highlight.js。

引入cdn文件
我使用的是bootcdn
其中moment.js需要額外引入中文語言
highlight.js需要引入自己需要的語言
我的項目中會展示javascript/html/css/bash/markdown (html支持需要引入xml)

//index.html

刪除依賴
這些依賴以前是使用npm安裝，現(xiàn)在需要在項目文件注釋掉（或直接刪除這些依賴），所有用到這些你需要替換的第三方依賴文件的代碼都需要刪除或注釋

eg:
// import Vue from vue
// import VueRouter from vue-router

然后在webpack的配置文件里加入如下代碼

  externals: {
    vue: Vue,
    vue-router: VueRouter,
    vuex: Vuex,
    axios: axios,
    moment: moment,
    highlight.js: highlight.js
  }

注意后面的名稱是改模塊暴露出來的名稱，具體不熟悉的可以到引入的js源碼里查看。

開啟gzip加速
打包時，可以將config/index.js文件的productionGzip設置為true
主要是webpack里compression-webpack-plugin模塊的實現(xiàn)。

使用node服務器需要安裝 compression模塊

express實現(xiàn)
const compression = require(compression)
const express = require(express)
const app = express()
app.use(compression({ threshold: 9 }))

nginx實現(xiàn)

  //conf文件里
  server {
        listen       8088;
        server_name  localhost;
        location / {
            gzip on;
            gzip_min_length 1k;
            gzip_buffers 16 64k;
            gzip_http_version 1.1;
            gzip_comp_level 9;
            gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
            gzip_vary on;
            root   /xxx/xxx/xxx;
            index index.html
        }
        }

構建項目，重啟服務。
然后就享受頁面秒開的算酸爽吧.

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/33791.html

vue項目優(yōu)化--使用CDN和Gzip

摘要：使用構建的項目，在打包發(fā)布的時候，發(fā)現(xiàn)打包后的文件體積很大，使用分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。具體實現(xiàn)以我個人項目為例我的項目中引入了以下模塊。使用vue-cli構建的vue項目，在打包發(fā)布的時候，發(fā)現(xiàn)打包后的文件體積很大，使用webpack-bundle-analyzer分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。第三方的依賴文件可以使用cdn外鏈的方式引入，這樣...

Object 2019-06-21 16:10 評論0 收藏0
VUE單頁應用首屏加載速度優(yōu)化方案

摘要：所以前端使用壓縮是沒有起作用的。影響，選項顯示警告在刪除沒有用到的代碼時不輸出警告刪除所有的語句還可以兼容瀏覽器內(nèi)嵌定義了但是只用到一次的變量提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值此方法有待實踐，留待下次分享單頁應用會隨著項目越大，導致首屏加載速度很慢！！！以下給出在下知道的幾種優(yōu)化方案使用CDN資源,減小服務器帶寬壓力路由懶加載將一些靜態(tài)js css放到其他地方（如...

lewif 2019-08-23 11:30 評論0 收藏0
VUE單頁應用首屏加載速度優(yōu)化方案

摘要：所以前端使用壓縮是沒有起作用的。影響，選項顯示警告在刪除沒有用到的代碼時不輸出警告刪除所有的語句還可以兼容瀏覽器內(nèi)嵌定義了但是只用到一次的變量提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值此方法有待實踐，留待下次分享單頁應用會隨著項目越大，導致首屏加載速度很慢！！！以下給出在下知道的幾種優(yōu)化方案使用CDN資源,減小服務器帶寬壓力路由懶加載將一些靜態(tài)js css放到其他地方（如...

jubincn 2019-07-25 14:25 評論0 收藏0
前端性能優(yōu)化與上線

摘要：看下狀態(tài)可以看到我已經(jīng)有一些鏡像了我已經(jīng)刪除了拉鏡像正常即可，中間那段是中國鏡像源，我們成功下來了的鏡像。攻破像我這樣屌絲的服務器一般都買的，大的資源文件不住，一個動輒的文件這很蛋疼，不上很難受。 4000字長文，多圖預警！！！流量慎入！！性能優(yōu)化 - 屌絲前端性能優(yōu)化、上線一條龍大家好我又來了，本章給大家?guī)淼膬?nèi)容是：上線和上線后的性能優(yōu)化項目地址實戰(zhàn)預覽地址實戰(zhàn)項目地址...

wupengyu 2019-06-28 16:51 評論0 收藏0
vue 博客優(yōu)化，服務端渲染(SSR)指南

摘要：現(xiàn)在我們需要在服務端和瀏覽器之間開啟一個中間層用于服務端渲染。問題設置的配置文件這樣我們的層才能獲取到的，并在客戶端將登陸時將保存下來，同時返回給客戶端。這樣用戶在刷新頁面時，會通過并帶上請求服務器獲取數(shù)據(jù)。 vue 博客優(yōu)化，服務端渲染(SSR)指南對已有的單頁應用進行改造，優(yōu)化，使之成為一個具有良好seo的應用 github地址WdBly博客地址安裝 git clone htt...

KnewOne 2019-08-23 13:00 評論0 收藏0