未優(yōu)化前
優(yōu)化步驟
1.按需加載
?修改前
修改后
如果你用的組件較多的話,這個步驟會比較繁瑣
優(yōu)化后的文件
vendor文件體積減少了將近300kb
在這里,我使用iview按需加載報錯
解決方案:
?在webpack.base.conf.js中加入
{
? test: /iview.src.*?js$/,
? loader: 'babel-loader'
},
然后重新 build
2.異步組件
在官方文檔中,是這樣介紹異步組件的:
在大型應用中，我們可能需要將應用拆分為多個小模塊，按需從服務器下載。為了進一步簡化，Vue.js 允許將組件定義為一個工廠函數(shù)哥捕，異步地解析組件的定義。Vue.js 只在組件需要渲染時觸發(fā)工廠函數(shù)嘉熊，并且把結(jié)果緩存起來遥赚，用于后面的再次渲染。
首先將我們所有的引入組件的位置使用異步組件引入 的方式
修改前
修改后
打包后再次發(fā)現(xiàn)vendor文件體積又減少近100kb
在這里打包后運行可能會出現(xiàn)某些js引入404了,我的解決方案是在config文件夾下的webpack配置文件index.js中的assetsPublicPath目錄后加 /
最后打包上傳到服務器,nginx開啟gzip后的文件
再來張優(yōu)化前的文件對比一下
我還發(fā)現(xiàn)還有一個文件特別大就是我的字體文件
我的做法是用woff字體文件替換掉ttf字體文件
