腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

更新時(shí)間：2022年04月13日 11:30:17 作者：那誰(shuí)家的菇?jīng)?

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

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

1.組件按需加載

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

2.去掉生成map文件

打包時(shí)會(huì)生成map文件，而map文件一般都比較大，可以取消生成map文件

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

3.cdn引入

通過(guò)外部引入的方式引入這些UI組件庫(kù)，從而減少打包文件過(guò)大的問(wèn)題

（1）index.html

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

（2）main.js

去掉在頁(yè)面引入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)化后：

項(xiàng)目打包之后js文件太大問(wèn)題

問(wèn)題描述

前端項(xiàng)目打包之后.js文件太大，導(dǎo)致項(xiàng)目第一次加載的時(shí)候太慢，查閱各種解決方案資料，匯總以下幾點(diǎn)：

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

類似于

<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的懶加載

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

但是官網(wǎng)有一句

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

這個(gè)插件依賴于6.x.babel 需要注意

3.服務(wù)器和前端配置開啟壓縮

服務(wù)器nginx配置添加:

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

前端配置config/index.js：

?productionGzip: true,

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

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

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片