快捷導(dǎo)航

如何解決vue項目打包后文件過大問題

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

這篇文章主要介紹了如何解決vue項目打包后文件過大問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

為什么打包后文件過大？

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

打包文件過大

在這里插入圖片描述

如何快速解決

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

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

未修改前路由引用方式

這里推薦使用es提案的import()方式是因為未修改前路由定義時也時用import的方式引用，若使用vue路由懶加載組件，修改的地方較多，不夠快捷。

修改后的路由引用方式

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

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

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

路由初始化

其他路由配置不需要變動。

2.CDN引入

cdn引入

在 index.html 頁面使用cdn加載依賴

 <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中的引用的依賴用cdn在index.html中引用

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

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

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

修改后打包文件大小