資訊專欄INFORMATION COLUMN
摘要：使用構(gòu)建的項(xiàng)目，在打包發(fā)布的時(shí)候，發(fā)現(xiàn)打包后的文件體積很大，使用分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。具體實(shí)現(xiàn)以我個(gè)人項(xiàng)目為例我的項(xiàng)目中引入了以下模塊。
使用vue-cli構(gòu)建的vue項(xiàng)目，在打包發(fā)布的時(shí)候，發(fā)現(xiàn)打包后的文件體積很大，使用webpack-bundle-analyzer分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。第三方的依賴文件可以使用cdn外鏈的方式引入，這樣就能大大縮小項(xiàng)目文件的體積。
具體實(shí)現(xiàn)（以我個(gè)人項(xiàng)目為例）
我的項(xiàng)目中引入了以下模塊vue vue-router vuex axios moment highlight.js。
引入cdn文件
我使用的是bootcdn
其中moment.js需要額外引入中文語言
highlight.js需要引入自己需要的語言
我的項(xiàng)目中會(huì)展示javascript/html/css/bash/markdown (html支持需要引入xml)
//index.html
刪除依賴
這些依賴以前是使用npm安裝，現(xiàn)在需要在項(xiàng)目文件注釋掉（或直接刪除這些依賴），所有用到這些你需要替換的第三方依賴文件的代碼都需要?jiǎng)h除或注釋
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加速
打包時(shí)，可以將config/index.js文件的productionGzip設(shè)置為true
主要是webpack里compression-webpack-plugin模塊的實(shí)現(xiàn)。
使用node服務(wù)器需要安裝 compression模塊
express實(shí)現(xiàn)
const compression = require("compression")
const express = require("express")
const app = express()
app.use(compression({ threshold: 9 }))
nginx實(shí)現(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
}
}
構(gòu)建項(xiàng)目，重啟服務(wù)。
然后就享受頁面秒開的算酸爽吧.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/10975.html
摘要：使用構(gòu)建的項(xiàng)目，在打包發(fā)布的時(shí)候，發(fā)現(xiàn)打包后的文件體積很大，使用分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。具體實(shí)現(xiàn)以我個(gè)人項(xiàng)目為例我的項(xiàng)目中引入了以下模塊。 使用vue-cli構(gòu)建的vue項(xiàng)目，在打包發(fā)布的時(shí)候，發(fā)現(xiàn)打包后的文件體積很大，使用webpack-bundle-analyzer分析后，發(fā)現(xiàn)占用空間最多的是引用的第三方依賴。第三方的依賴文件可以使用cdn外鏈的方式引入，這樣...
摘要：所以前端使用壓縮是沒有起作用的。影響，選項(xiàng)顯示警告在刪除沒有用到的代碼時(shí)不輸出警告刪除所有的語句還可以兼容瀏覽器內(nèi)嵌定義了但是只用到一次的變量提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值此方法有待實(shí)踐，留待下次分享 單頁應(yīng)用會(huì)隨著項(xiàng)目越大，導(dǎo)致首屏加載速度很慢?。。∫韵陆o出在下知道的幾種優(yōu)化方案 使用CDN資源,減小服務(wù)器帶寬壓力 路由懶加載 將一些靜態(tài)js css放到其他地方（如...
摘要：所以前端使用壓縮是沒有起作用的。影響，選項(xiàng)顯示警告在刪除沒有用到的代碼時(shí)不輸出警告刪除所有的語句還可以兼容瀏覽器內(nèi)嵌定義了但是只用到一次的變量提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值此方法有待實(shí)踐，留待下次分享 單頁應(yīng)用會(huì)隨著項(xiàng)目越大，導(dǎo)致首屏加載速度很慢?。?！以下給出在下知道的幾種優(yōu)化方案 使用CDN資源,減小服務(wù)器帶寬壓力 路由懶加載 將一些靜態(tài)js css放到其他地方（如...
摘要：看下狀態(tài)可以看到我已經(jīng)有一些鏡像了我已經(jīng)刪除了拉鏡像正常即可，中間那段是中國(guó)鏡像源，我們成功下來了的鏡像。攻破像我這樣屌絲的服務(wù)器一般都買的，大的資源文件不住，一個(gè)動(dòng)輒的文件這很蛋疼，不上很難受。 4000字長(zhǎng)文，多圖預(yù)警！?。×髁可魅耄?！ 性能優(yōu)化 - 屌絲前端性能優(yōu)化、上線一條龍 大家好我又來了，本章給大家?guī)淼膬?nèi)容是：上線和上線后的性能優(yōu)化 項(xiàng)目地址 實(shí)戰(zhàn)預(yù)覽地址 實(shí)戰(zhàn)項(xiàng)目地址...
摘要：現(xiàn)在我們需要在服務(wù)端和瀏覽器之間開啟一個(gè)中間層用于服務(wù)端渲染。問題設(shè)置的配置文件這樣我們的層才能獲取到的，并在客戶端將登陸時(shí)將保存下來，同時(shí)返回給客戶端。這樣用戶在刷新頁面時(shí)，會(huì)通過并帶上請(qǐng)求服務(wù)器獲取數(shù)據(jù)。 vue 博客優(yōu)化，服務(wù)端渲染(SSR)指南 對(duì)已有的單頁應(yīng)用進(jìn)行改造，優(yōu)化，使之成為一個(gè)具有良好seo的應(yīng)用 github地址WdBly博客地址 安裝 git clone htt...
閱讀 1711·2021-11-25 09:43
閱讀 2669·2019-08-30 15:53
閱讀 1821·2019-08-30 15:52
閱讀 2905·2019-08-29 13:56
閱讀 3326·2019-08-26 12:12
閱讀 570·2019-08-23 17:58
閱讀 2133·2019-08-23 16:59
閱讀 941·2019-08-23 16:21
