建站
咨詢
售后
建站咨詢
新聞中心
前言：最近用vue-cli 3.0 構(gòu)建一個小型的工單管理系統(tǒng)，完工后build發(fā)現(xiàn)一個chunk-vendors包就達(dá)到985kb，加上其他一些資源文件，首頁的下載總共大小快要2M。測試給的第一個反饋就是首屏慢慢慢慢慢！
我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、岳西ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的岳西網(wǎng)站制作公司
根據(jù)首屏加載資源文件過大，進(jìn)行一下優(yōu)化：
1. 路由懶加載
結(jié)合Vue的異步組件再結(jié)合webpack的代碼分割，我們可以輕松的實(shí)現(xiàn)路由懶加載。
vue-cli 3.0 模式就使用了Babel，我們需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。
// 安裝插件 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ù)。它將瀏覽器請求的文件先在服務(wù)器端進(jìn)行壓縮，然后傳遞給瀏覽器，瀏覽器解壓之后再進(jìn)行頁面的解析工作。在服務(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后的壓縮包的大小，大概減少了三分之二
.jpg)
3. 啟用CDN加速
用Gzip已把文件的大小減少了三分之二了，加載速度從之前2.7秒多到現(xiàn)在的1.8秒多，但這個還是得不到滿足。那我們就把那些不太可能改動的代碼或者庫分離出來，繼續(xù)減小單個chunk-vendors，然后通過cdn加載進(jìn)行加速加載資源。
// 修改vue.config.js 分離不常用代碼庫
module.exports = {
configureWebpack: config => {
if (isProduction) {
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'moment': 'moment'
}
}
}
}
// 在public文件夾的index.html 加載
現(xiàn)在再build后看下大小和訪問速度：
.jpg)
CDN優(yōu)化后.jpg
可以看到chunk-verdors 又減少了114kb，通過CDN加載整個文檔速度已經(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，這個優(yōu)化還是有點(diǎn)效果的。
總結(jié)
首屏優(yōu)化工作告一段落，通過以上四項(xiàng)的優(yōu)化，已經(jīng)很大的提升了首屏的加載速度。如果想再進(jìn)一步優(yōu)化還是空間的，例如從代碼層面去減少代碼量（代碼復(fù)用率）。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁題目：詳解vue-cli3.0build包太大導(dǎo)致首屏過長的解決方案
網(wǎng)站鏈接：http://www.ef60e0e.cn/article/gcigdo.html
