腳本之家服務器常用軟件

快捷導航

vue打包生成的文件的js文件過大的優(yōu)化方式

更新時間：2022年04月13日 11:30:17 作者：那誰家的菇涼

這篇文章主要介紹了vue打包生成的文件的js文件過大的優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue打包生成的js文件過大優(yōu)化

1.組件按需加載

現(xiàn)在大多的ui庫都是以組件的形式進行處理，所以只需導入需要模塊的即可

2.去掉生成map文件

打包時會生成map文件，而map文件一般都比較大，可以取消生成map文件

（1）config/index.js找到productionSourceMap把true改為false

3.cdn引入

通過外部引入的方式引入這些UI組件庫，從而減少打包文件過大的問題

（1）index.html

引入外部文件，并且加上<router-view>

（2）main.js

去掉在頁面引入vue和vue-router

4.路由懶加載

5.代碼壓縮

config/index.js 找到 productionGzip 把 false 改為 true

注意：要先安裝compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

6.最后

優(yōu)化前：

優(yōu)化后：

項目打包之后js文件太大問題

問題描述

前端項目打包之后.js文件太大，導致項目第一次加載的時候太慢，查閱各種解決方案資料，匯總以下幾點：

1.使用cdn引入不怎么改變的第三方庫

類似于

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

webpack.base.conf.js 添加：

? ? ? externals: {
? ? ? ? ?'vue': 'Vue',
? ? ? ? ?'vue-router': 'VueRouter',
? ? ? ? ?'element-ui': 'ELEMENT',
? ? ? ? ?'echarts': 'echarts',
? ? ? ? ?'axios': 'axios'
? ? ? },

2.使用vue的懶加載

官網地址[https://router.vuejs.org/zh/guide/advanced/lazy-loading.html]

但是官網有一句

如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。

這個插件依賴于6.x.babel 需要注意

3.服務器和前端配置開啟壓縮

服務器nginx配置添加:

? gzip on;
? gzip_static on; ?--這個很重要 不加的話 訪問加載的還是未壓縮的文件

前端配置config/index.js：

?productionGzip: true,

然后再引入插件 compression-webpack-plugin

需要注意版本 "compression-webpack-plugin": "^1.1.12",

前面兩種文件大小并沒有減少太多使用第三種的時候減少的最多

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频