hi~我叫內(nèi)孤，一名web前端開發(fā)者/:B-)形庭，今天我又要來說說我的'故事'了。
前言：最近用vue-cli 3.0 構(gòu)建一個(gè)小型的工單管理系統(tǒng)，完工后build發(fā)現(xiàn)一個(gè)chunk-vendors包就達(dá)到985kb挪捕，加上其他一些資源文件，首頁(yè)的下載總共大小快要2M争便。測(cè)試給的第一個(gè)反饋就是首屏慢慢慢慢慢级零！
根據(jù)首屏加載資源文件過大，進(jìn)行一下優(yōu)化：
1. 路由懶加載
結(jié)合Vue的異步組件再結(jié)合webpack的代碼分割滞乙，我們可以輕松的實(shí)現(xiàn)路由懶加載奏纪。
?vue-cli 3.0 模式就使用了Babel，我們需要添加
syntax-dynamic-import插件斩启，才能使 Babel 可以正確地解析語(yǔ)法序调。
// 安裝插件 syntax-dynamic-import
cnpm install --save-dev @babel/plugin-syntax-dynamic-import
// 修改babel.config.js
module.exports = {
"presets": [
"@vue/app"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
},
"syntax-dynamic-import"
]
]
}
// 修改路由組件的加載（router/index.js）
{
path: '/',
name: 'home',
component: resolve => require(['pages/Home'], resolve)
}
使用了路由懶加載，已經(jīng)把原來的chunk-vendors降到了789kb兔簇，但加載789kb還是太大发绢。那繼續(xù)優(yōu)化
2. 服務(wù)器開啟Gzip
Gzip是GNU zip的縮寫，顧名思義是一種壓縮技術(shù)垄琐。它將瀏覽器請(qǐng)求的文件先在服務(wù)器端進(jìn)行壓縮边酒，然后傳遞給瀏覽器，瀏覽器解壓之后再進(jìn)行頁(yè)面的解析工作狸窘。在服務(wù)端開啟Gzip支持后墩朦，我們前端需要提供資源壓縮包。
通過CompressionWebpackPlugin插件build提供壓縮
// 安裝插件
cnpm i --save-dev compression-webpack-plugin
// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
.....
module.exports = {
....
configureWebpack: config => {
if (isProduction) {
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}))
}
}
}
現(xiàn)在我們看一下build后的壓縮包的大小翻擒，大概減少了三分之二
3. 啟用CDN加速
用Gzip已把文件的大小減少了三分之二了氓涣，加載速度從之前2.7秒多到現(xiàn)在的1.8秒多，但這個(gè)還是得不到滿足陋气。那我們就把那些不太可能改動(dòng)的代碼或者庫(kù)分離出來劳吠，繼續(xù)減小單個(gè)chunk-vendors，然后通過CDN加載進(jìn)行加速加載資源恩伺。
// 修改vue.config.js 分離不常用代碼庫(kù)
module.exports = {
configureWebpack: config => {
if (isProduction) {
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'moment': 'moment'
}
}
}
}
// 在public文件夾的index.html 加載
<!-- CND -->
<!--
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
-->
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
??如果使用了餓了么的element赴背，不要使用beta版CDN，不然在日期組件上會(huì)遇到坑， 建議使用自家或者收費(fèi)的CDN凰荚，保證CDN的可靠性
現(xiàn)在再build后看下大小和訪問速度：
可以看到chunk-verdors 又減少了114kb燃观，通過CDN加載整個(gè)文檔速度已經(jīng)接近1秒。
4. 修改uglifyOptions去除console來減少文件大小
// 安裝uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev
// 修改vue.config.js
configureWebpack: config => {
if (isProduction) {
.....
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
)
}
}
如果代碼中打了很log便瑟，這個(gè)優(yōu)化還是有點(diǎn)效果的缆毁。
總結(jié)
首屏優(yōu)化工作告一段落，通過以上四項(xiàng)的優(yōu)化到涂，已經(jīng)很大的提升了首屏的加載速度脊框。如果想再進(jìn)一步優(yōu)化還是空間的，例如從代碼層面去減少代碼量（代碼復(fù)用率）践啄。
vue-clie 3.0優(yōu)化相關(guān)文章 vue-cli 3.0 使用CDN區(qū)分開發(fā)浇雹、生產(chǎn)、預(yù)發(fā)布環(huán)境
