用nuxt開發(fā)完項目之后，開開心心打包扔上服務器準備收工，卻沒多久坟冲，測試童鞋遺憾的告訴我靠汁，壓測50并發(fā)未通過。what皆疹？好吧疏橄。咱們再接下來老老實實的研究怎么壓縮打包優(yōu)化性能。
性能優(yōu)化略就，無外乎那幾個方案：文件壓縮捎迫，文件緩存，CDN表牢，DNS 預解析窄绒。。初茶。
這里我們首先看一下不加任何優(yōu)化的項目颗祝，打包后的分布：
這里能看到element-ui占了絕大部分的打包空間，是因為全局引入了element-ui恼布，所以即使我們只使用了一部分的elemnt組件螺戳，但仍然把整個element給打包進來了。
所以這里有一個可以優(yōu)化的點：只引入element使用的組件折汞，這樣在打包的時候只需要打包使用的組件倔幼，體積就會減小很多。
我們再來看看這么處理之后爽待，我們打包出來的效果：
可以看出损同，我們減少了將近400kb的體積，效果十分顯著鸟款。
好了膏燃，我又自信滿滿的把包丟到服務器上，準備金盆洗手何什。??
然鵝沒過多久组哩，運維童鞋發(fā)過來一張圖把我打回原點。
我看了一下vendor.app.js，足有501kb伶贰，難怪會阻塞???♀?好吧蛛砰，這里應該使用上文件壓縮這桿大槍了。
nuxt本身就是基于webpack的黍衙，正好安裝compression-webpack-plugin來對文件進行壓縮泥畅。
首先安裝npm install?compression-webpack-plugin
然后在nuxt.config.js中：
const CompressionPlugin = require('compression-webpack-plugin');
module.exports={
? ? build: {
? ??????plugins: [
? ? ? ????new CompressionPlugin({
? ? ? ? ????test: /\.js$|\.html$|\.css/, // 匹配文件名
? ? ? ? ????threshold: 10240, // 對超過10kb的數據進行壓縮
? ? ? ? ????deleteOriginalAssets: false // 是否刪除原文件
? ? ? ????})
? ? ????],
????}
}
這樣打包出來的大小雖然沒變，但是點擊.nuxt-dist-client中你會發(fā)現
觀察發(fā)現gz打包后琅翻，較原來的文件減少了3/4的體積位仁。有了這些gz后綴的文件，再配合nginx打開gzip服務望迎。我想這回應該可以沖過50并發(fā)了吧障癌，說不定200并發(fā)都沒問題??????
好了，我這回真的自信滿滿的把包丟到服務器上辩尊，通知測試童鞋再次壓測涛浙，果不其然，測試童鞋過了一會回復：50并發(fā)跑5次無異常摄欲。????我大氣說轿亮，上100！我翹著得意的二郎腿胸墙，等著好消息再次到來我注。過了一會，果不其然迟隅！測試童鞋告訴我但骨，100并發(fā)阻塞。原因同上智袭，出在了vendor.app.js上??
這里我說一下vendor.app.js打包之后的體積是144kb奔缠。然鵝在高并發(fā)下，表現還是不理想吼野，于是乎我只能上網去到處搜索解決方案校哎，畢竟po主的webpack知識也就那么一勺水的深度???♀????♀?
這里還真讓我找到了一個臺灣的網站，可見參考鏈接第三條瞳步。
splitChunks: 設定 Chunks 的最大和最小 size闷哆。
在nuxt.config.js中加入：
module.exports={
? ? build: {
????????optimization: {
? ? ? ????????splitChunks: {
? ? ? ?????????minSize: 10000,
? ? ? ? ????????maxSize: 250000
? ? ? ????????}
? ? ????},
????}
}
打包，觀察打包結果：
可以看到雖然包體積雖然沒變单起，但是像vendor.app.js這種單個體積大的被拆分成n個體積小的文件了抱怔。
這回終于是可以突破100并發(fā)5次無異常，達成并發(fā)要求了????????
總結一下嘀倒，其實po主也不是什么webpack大神野蝇，也是摸爬滾打整出來的讼稚，大家如果能有什么更好的優(yōu)化建議或者指教，請多多交流绕沈，不對之處我會改正！
參考：?
