欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

詳解vue-cli3.0build包太大導(dǎo)致首屏過長的解決方案

前言:最近用vue-cli 3.0 構(gòu)建一個(gè)小型的工單管理系統(tǒng),完工后build發(fā)現(xiàn)一個(gè)chunk-vendors包就達(dá)到985kb,加上其他一些資源文件,首頁的下載總共大小快要2M。測試給的第一個(gè)反饋就是首屏慢慢慢慢慢!

我們提供的服務(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后的壓縮包的大小,大概減少了三分之二

詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案

3. 啟用CDN加速

用Gzip已把文件的大小減少了三分之二了,加載速度從之前2.7秒多到現(xiàn)在的1.8秒多,但這個(gè)還是得不到滿足。那我們就把那些不太可能改動的代碼或者庫分離出來,繼續(xù)減小單個(gè)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 加載

<!-- 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-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>

現(xiàn)在再build后看下大小和訪問速度:

詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案

CDN優(yōu)化后.jpg

可以看到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ù)用率)。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題:詳解vue-cli3.0build包太大導(dǎo)致首屏過長的解決方案
網(wǎng)站網(wǎng)址:http://www.chinadenli.net/article10/gcigdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站定制開發(fā)網(wǎng)頁設(shè)計(jì)公司搜索引擎優(yōu)化小程序開發(fā)品牌網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營