新公司是做自己的獨(dú)立產(chǎn)品骨坑，比之前呆過(guò)的外包公司要求嚴(yán)格的多锻全，注重用戶體驗(yàn)眯杏，以下是在新項(xiàng)目里進(jìn)行前端優(yōu)化的一些操作
一开瞭，低版本空白屏問(wèn)題懒震，以及ios8的樣式問(wèn)題
本項(xiàng)目是通過(guò)vue-cli搭建，上線以后運(yùn)行在新版本的蘋果手機(jī)和安卓手機(jī)上均無(wú)問(wèn)題嗤详。但是在ios8 9上出現(xiàn)了空白屏的原理个扰，經(jīng)過(guò)測(cè)試以后發(fā)現(xiàn)是低版本不兼容es6的語(yǔ)法，經(jīng)過(guò)幾番嘗試找到了最優(yōu)解断楷。
1 空白屏問(wèn)題
首先安裝babel-polyfill,安裝命令：npm install --save-dev babel-polyfill?
安裝成功后找到webpack.base.conf里把第16行的代碼換成第17行的寫法锨匆，如圖1所示
相同的頁(yè)面，加入紅色方框里的代碼冬筒，如圖2所示
{
? ? ? ? test: /\.js$/,
? ? ? ? exclude: /node_modules/,
? ? ? ? loader: "babel-loader"
? ? ? },
2 樣式問(wèn)題
找到webpack.prod.conf文件恐锣，將注釋代碼替換成紅色方框內(nèi)的代碼即可，如圖3
二? 打包之后的文件以及生成的vendor文件過(guò)大的問(wèn)題
1打包文件過(guò)大的問(wèn)題
找到config底下的index.js文件舞痰，在69行的代碼productionSourceMap:true,將true改為false土榴。不然在最終打包的文件中會(huì)出現(xiàn)一些map文件，map文件的作用在于：項(xiàng)目打包后响牛，代碼都是經(jīng)過(guò)壓縮加密的玷禽，如果運(yùn)行時(shí)報(bào)錯(cuò)赫段，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。有了map就可以像未加密的代碼一樣矢赁，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)糯笙。但是這里為了瘦身大業(yè)，可以舍去撩银。
2生成的vendor文件過(guò)大的問(wèn)題
vendor文件里會(huì)將項(xiàng)目中vue? vue-router? mint-ui element-ui等庫(kù)和框架一起打包壓縮给涕，這樣必定會(huì)占用空間，造成壓縮包過(guò)大额获。通常都有好幾百k至少超過(guò)1M够庙，在加載頁(yè)面的時(shí)候會(huì)極度耗時(shí)。
這里建議使用cdn 然后在build里找到webpack.base.conf抄邀，加入平常不改動(dòng)的庫(kù)耘眨，如圖4所示，然后在入口頁(yè)面index.html導(dǎo)入相應(yīng)的cdn
同時(shí)要在項(xiàng)目里把諸如圖5這樣的導(dǎo)入都去除境肾，否則打包的時(shí)候依然會(huì)占用空間剔难，我項(xiàng)目里這樣優(yōu)化之后，vendor大小由239k優(yōu)化到10k,減小的20倍
三 壓縮圖片 奥喻，推薦一個(gè)壓縮圖片的工具 https://tinypng.com/? 如果有更改好的工具可以留言告知~
