記錄了自己的博客在禁用緩存的情況下，從八九秒加載時間到最終985ms的優化實踐，開啟緩存的情況下能達到138ms的訪問速度
本人的個人博客採用的是Vue-cli4.1.2 + typescript構建的，項目目錄結構如下
<code>├─ src //主文件
│ ├─ api //接口文件夾
| | |- config.js //後端接口地址的配置,將測試、開發、生產環境分開
| | └─ user.js //接口文件，配置了token請求頭，具體接口根據需求修改
│ ├─ assets //資源文件
│ ├─ components //公用組件
│ ├─ directive //vue自定義指令
| ├─ filters //存放過濾器文件，自帶了手機號加密，手機號格式化，時間日期處理
| ├─ interceptors //存放axios攔截器配置，寫入了接口調用的loading加載以及http狀態碼報錯攔截
| ├─ interceptors //放置公用的接口，對數據進行類型限制
| ├─ layout //佈局文件，通過子路由渲染方式實現，具體HTML佈局根據需求修改
| ├─ mixins //混入文件，配置了一個平滑滾動的方法
| ├─ plugins //外部插件文件夾，配置了按需引入的element-ui
| ├─ reg //存放正則以及校驗的文件夾
| | |- reg.ts //存放正則表達式，自帶了傳真，郵箱，qq，手機號，銀行卡號，固定電話，密碼強度校驗正則
| | └─ validator.ts //存放element-ui自定義校驗，自帶了傳真，郵箱，qq，手機號，銀行卡號，固定電話，密碼強度自定義校驗
| ├─ router //路由文件
| ├─ store //vuex全局變量文件
| | |- index.ts //store主文件
| | └─ module //store模塊文件夾
| | | └─ user.ts //存放user相關的全局變量
| ├─ stylus //css預處理器文件夾
| | |- reset.styl //樣式初始化文件,自帶了非標準盒子，a標籤清除下劃線，清除內外邊距，禁止圖片拖拽等效果
| | └─ color.styl //顏色變量文件
| ├─ utils //公用方法文件夾
| | |- area.ts //存放省市區三級地區的數據
| | |- array.ts //存放數組相關的公用方法，自帶了兩個元素交換位置，元素前進後退一格，元素置頂或末尾，去重，刪除指定元素操作
| | └─ object.ts //存放對象相關的公用方法，自帶了對象清空所有值的方法
| ├─ views //頁面文件夾
| ├─ main.ts //主配置文件
| ├─ babel.config.js //babel配置文件，寫入了element-ui按需加載的配置
| ├─ package.json //npm的包管理文件
| ├─ tsconfig.json //ts配置文件
| ├─ vue.config.js //vue配置文件
/<code>
1.關閉productionSourceMap
首先，由於最新版的腳手架不自帶配置文件了，先在根目錄新建vue.config.js文件，關閉productionSourceMap，在vue.config.js中寫入如下內容
<code>module.exports = {
productionSourceMap: false
}
/<code>2.開啟Gzip壓縮
安裝插件compression-webpack-plugin，打開代碼壓縮，npm install --save-dev compression-webpack-plugin，現在的vue.config.js代碼如下，但是，需要注意的是，服務器上nginx也必須開啟gzip才能生效
<code>// 是否為生產環境
const isProduction = process.env.NODE_ENV !== 'development';
// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
productionSourceMap: false,
configureWebpack: config => {
// 生產環境相關配置
if (isProduction) {
//gzip壓縮
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 10240, // 只有大小大於該值的資源會被處理 10240
minRatio: 0.8, // 只有壓縮率小於這個值的資源才會被處理
deleteOriginalAssets: false // 刪除原文件
})
)
}
}
}
/<code>
打開nginx文件夾下的nginx.conf文件，在http模塊中寫入以下內容
<code> # 開啟gzip
gzip on;
# 啟用gzip壓縮的最小文件，小於設置值的文件將不會壓縮
gzip_min_length 1k;
# gzip 壓縮級別，1-9，數字越大壓縮的越好，也越佔用CPU時間，後面會有詳細說明
gzip_comp_level 2;
# 進行壓縮的文件類型。javascript有多種形式，後面的圖片壓縮不需要的可以自行刪除
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_vary on;
# 設置壓縮所需要的緩衝區大小
gzip_buffers 4 16k;
/<code>
然後輸入命令nginx -s reload重啟nginx服務
如果後端nginx開啟了gzip，可以從network中的Content-Encoding中看到gzip
image.png
3.開啟CDN加速(建議選配，CDN雖然速度快，但沒有本地打包穩定)
將使用的插件使用cdn鏈接，並且配置webpack將使用CDN的插件不進行打包，別忘記還要再index.html中引入js以及css
<code>// 是否為生產環境
const isProduction = process.env.NODE_ENV !== 'development';
// 本地環境是否需要使用cdn
const devNeedCdn = false
// cdn鏈接
const cdn = {
// cdn：模塊名稱和模塊作用域命名（對應window裡面掛載的變量名稱）
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
'marked': 'marked',
'highlight.js': 'hljs',
'nprogress': 'NProgress'
},
// cdn的css鏈接
css: [
'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
],
// cdn的js鏈接
js: [
'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
'https://cdn.bootcss.com/marked/0.8.0/marked.min.js',
'https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js',
'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js'
]
}
module.exports = {
chainWebpack: config => {
// ============注入cdn start============
config.plugin('html').tap(args => {
// 生產環境或本地需要cdn時，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// ============注入cdn start============
},
configureWebpack: config => {
// 用cdn方式引入，則構建時要忽略相關資源
if (isProduction || devNeedCdn) config.externals = cdn.externals
}
}
/<code>
接下來，在index.html中引入使用了CDN的鏈接
<code>
<link>
htmlWebpackPlugin.options.cdn.css) { %>
<link> href=""
rel="stylesheet"
/>
<title>CoolDream/<title>
<noscript>
We're sorry but blog doesn't work properly without JavaScript enabled. Please enable it to continue.
/<noscript>
htmlWebpackPlugin.options.cdn.js) { %>
/<code>
打包後拋到服務器上，打開開發者工具的network，如果看到http請求cdn，那麼就代表配置成功了，如圖所示
image.png
4.代碼壓縮
先安裝插件npm i -D uglifyjs-webpack-plugin
然後在最上方引入依賴
<code>// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
/<code>
在configureWebpack模塊中引入代碼壓縮
<code>// 代碼壓縮
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生產環境自動刪除console
compress: {
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
)
/<code>
5.公共代碼抽離，寫在configureWebpack模塊中
<code>// 公共代碼抽離
config.optimization = {
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'all',
test: /node_modules/,
name: 'vendor',
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
},
common: {
chunks: 'all',
test: /[\\\\/]src[\\\\/]js[\\\\/]/,
name: 'common',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
styles: {
name: 'styles',
test: /\\.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true
},
runtimeChunk: {
name: 'manifest'
}
}
}
}
/<code>
6.圖片壓縮()
1.使用圖片壓縮插件
- 先安裝插件npm install image-webpack-loader --save-dev
- 在chainWebpack中新增以下代碼
<code>// ============壓縮圖片 start============
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
// ============壓縮圖片 end============
/<code>
- 所以最終的配置如下
<code>// 是否為生產環境
const isProduction = process.env.NODE_ENV !== 'development';
// 代碼壓縮
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 本地環境是否需要使用cdn
const devNeedCdn = false
// cdn鏈接
const cdn = {
// cdn：模塊名稱和模塊作用域命名（對應window裡面掛載的變量名稱）
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
'marked': 'marked',
'highlight.js': 'hljs',
'nprogress': 'NProgress'
},
// cdn的css鏈接
css: [
'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
],
// cdn的js鏈接
js: [
'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
'https://cdn.bootcss.com/marked/0.8.0/marked.min.js',
'https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js',
'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js'
]
}
module.exports = {
productionSourceMap: false,
chainWebpack: config => {
// ============注入cdn start============
config.plugin('html').tap(args => {
// 生產環境或本地需要cdn時，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// ============注入cdn start============
// ============壓縮圖片 start============
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
// ============壓縮圖片 end============
},
configureWebpack: config => {
// 用cdn方式引入，則構建時要忽略相關資源
if (isProduction || devNeedCdn) config.externals = cdn.externals
// 生產環境相關配置
if (isProduction) {
//gzip壓縮
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 10240, // 只有大小大於該值的資源會被處理 10240
minRatio: 0.8, // 只有壓縮率小於這個值的資源才會被處理
deleteOriginalAssets: false // 刪除原文件
})
)
// 代碼壓縮
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生產環境自動刪除console
compress: {
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
)
}
// 公共代碼抽離
config.optimization = {
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'all',
test: /node_modules/,
name: 'vendor',
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
},
common: {
chunks: 'all',
test: /[\\\\/]src[\\\\/]js[\\\\/]/,
name: 'common',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
styles: {
name: 'styles',
test: /\\.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true
},
runtimeChunk: {
name: 'manifest'
}
}
}
}
}
}
/<code>
2.將靜態資源存儲在雲端，個人用的七牛雲,對象存儲用於存儲文件，使用cdn加速讓存儲的靜態資源訪問速度更快。(推薦，速度能快挺多)
- 我個人申請了七牛雲，實名認證就有10G空間可用，每個月有10G的免費流量，不過不綁定域名的話只有30天體驗機會，我是綁定了我的域名進行DNS解析中轉，具體的操作可以參考這一篇博客，https://www.cnblogs.com/mazhichu/p/12206785.html
7.nginx配置緩存同樣也可以提高網站的訪問速度（雖然這點有點偏離前端打包主題了，但是對於自己獨立開發個人博客網站的前端來說還是非常有用的！）
在nginx.conf的http模塊中寫入一下內容
<code> # 設置緩存路徑並且使用一塊最大100M的共享內存，用於硬盤上的文件索引，包括文件名和請求次數，每個文件在1天內若不活躍（無請求）則從硬盤上淘汰，硬盤緩存最大10G，滿了則根據LRU算法自動清除緩存。
proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;
/<code>
然後在nginx.conf的serve模塊中寫入一下內容，保存配置，nginx -s reload重啟服務即可看到效果
<code>location ~* ^.+\\.(css|js|ico|gif|jpg|jpeg|png)$ {
log_not_found off;
# 關閉日誌
access_log off;
# 緩存時間7天
expires 7d;
# 源服務器
proxy_pass http://localhost:8888;
# 指定上面設置的緩存區域
proxy_cache imgcache;
# 緩存過期管理
proxy_cache_valid 200 302 1d;
proxy_cache_valid 404 10m;
proxy_cache_valid any 1h;
proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
}/<code>
分享到:
閱讀更多 Echa攻城獅 的文章
