快捷導(dǎo)航

如何解決vue項(xiàng)目打包后文件過(guò)大問(wèn)題

更新時(shí)間：2022年04月13日 11:11:36 作者：Kuno_

這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過(guò)大問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

為什么打包后文件過(guò)大？

移動(dòng)app項(xiàng)目，使用vue-cli腳手架搭建，UI主要運(yùn)用的是Muse-UI，開(kāi)發(fā)過(guò)程中為滿(mǎn)足需求，混入Element-UI部分組件，加之團(tuán)隊(duì)開(kāi)發(fā)，前端不止一人參與，在沒(méi)有統(tǒng)一規(guī)范約束的情況下，編碼風(fēng)格和方式都很迥異和…混亂，以致依賴(lài)過(guò)多，打包時(shí)webpack把所有的庫(kù)都打包在一起，所以vendor.js文件和app.js文件很大，最后出現(xiàn)進(jìn)入首個(gè)頁(yè)面時(shí)會(huì)長(zhǎng)時(shí)間的白屏，影響用戶(hù)體驗(yàn)。

打包文件過(guò)大

在這里插入圖片描述

如何快速解決

在優(yōu)化復(fù)雜性項(xiàng)目時(shí)，只增不減可大大減少風(fēng)險(xiǎn)，bug可控，既保證項(xiàng)目正常運(yùn)行同時(shí)減少不必要的工作量

1.路由懶加載【使用es6提案的import()方式】

未修改前路由引用方式

這里推薦使用es提案的import()方式是因?yàn)槲葱薷那奥酚啥x時(shí)也時(shí)用import的方式引用，若使用vue路由懶加載組件，修改的地方較多，不夠快捷。

修改后的路由引用方式

修改后引用方式如圖，即：

把import login from '@/views/login/login'修改為

const login = () => import('@/views/login/login')

路由初始化

其他路由配置不需要變動(dòng)。

2.CDN引入

cdn引入

在 index.html 頁(yè)面使用cdn加載依賴(lài)

 <link rel="stylesheet"  rel="external nofollow" >
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
 <link rel="stylesheet"  rel="external nofollow" >
 <link  rel="external nofollow"  rel="stylesheet">
 <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
 <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>
 <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>
 <script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.js"></script>

添加 webpack.base.conf.js 配置

  externals: {
    'element-ui': 'ELEMENT',
    'vue': 'Vue',
    'querystring':'Qs',
    'vue-router': 'VueRouter',
    'MuseUI': 'MuseUI',
    'axios':'axios',
    'jquery': "jQuery",
    "EXIF":'EXIF',
    'echarts': 'echarts'
  },

main.js

盡可能把在main.js中的引用的依賴(lài)用cdn在index.html中引用

在開(kāi)源項(xiàng)目 CDN 加速服務(wù)中可以查找到大部分開(kāi)源庫(kù)的cdn

這里是不建議在優(yōu)化已成型項(xiàng)目時(shí)直接把main.js中依賴(lài)引用部分刪掉，如果刪掉需要在公共JS中重新引入或者在所需依賴(lài)頁(yè)面中導(dǎo)入，還要注意導(dǎo)入時(shí)定義的名稱(chēng)需要跟項(xiàng)目中已存在的依賴(lài)引用變量名一致，這將加大自己的工作量，新搭建項(xiàng)目或者想深入學(xué)習(xí)讓代碼更純凈者可以去度娘找資料研究哦

這樣優(yōu)化就告一段落了，打包后文件大小如下：

修改后打包文件大小