利用report分析vue項(xiàng)目中各文件大小
report分析vue項(xiàng)目中各文件大小
vendor.js
在Vue項(xiàng)目中，引入到工程中的所有js、css文件，編譯時(shí)都會(huì)被打包進(jìn)vendor.js，瀏覽器在加載該文件之后才能開(kāi)始顯示首屏。
若是引入的庫(kù)眾多，那么vendor.js文件體積將會(huì)相當(dāng)?shù)拇?，影響首開(kāi)的體驗(yàn)。
vue-cli 4 使用report分析vendor.js
Vue Cli（@/vue/cli）自帶的webpack包體積優(yōu)化工具，它可以查看各個(gè)模塊的size大小，方便優(yōu)化。
只需要在build后面加上 --report 參數(shù)即可。
1、 我們把命令配置到package.json里
"scripts": {
? "serve": "vue-cli-service serve",
? "build": "vue-cli-service build",
? "report": "vue-cli-service build --report" ?//加入該行
},2、執(zhí)行npm run report 打包并生成report
注意：網(wǎng)上很多說(shuō)要先安裝webpack-bundle-analyzer包，其實(shí)不需要安裝。
3、運(yùn)行 npm run report 后
會(huì)在 build 的同時(shí)，在dist目錄會(huì)生成一個(gè)report.html，打開(kāi)后可看到各文件占用大小
vue項(xiàng)目打包文件大小分析
vuecli3.0項(xiàng)目搭建與webpack-bundle-analyzer分析
首先說(shuō)一下vuecli低版本與cli3.0的項(xiàng)目結(jié)構(gòu)的區(qū)別
少了build config 文件夾 如果需要進(jìn)行webpack等配置
需要在根目錄新建 vue.config.js
cli低版本
cli高版本
vue.config.js 文件內(nèi)容 本次只記錄 打包大小分析以及優(yōu)化包大小
module.exports = {
publicPath: './',
// 輸出文件目錄
outputDir: 'dist',
// 靜態(tài)資源目錄 (js, css, img, fonts)
assetsDir: 'assets',
// webpack-dev-server 相關(guān)配置
devServer: {
// 默認(rèn)打開(kāi)瀏覽器
open: true,
// 端口號(hào)
port: 8080,
},
// webpack 配置
chainWebpack: (config) => {
// 第一 增加打包文件大小分析
if (process.env.use_analyzer) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
},
//webpack配置
configureWebpack: config => {
//警告 webpack 的性能提示
config.performance = {
hints: 'warning',
//入口起點(diǎn)的最大體積
maxEntrypointSize: 50000000,
//生成文件的最大體積
maxAssetSize: 30000000,
//只給出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js');
}
},
// 打包忽略
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT'
}
}
}第一 打包分析 webpack-bundle-analyzer
首先 下載依賴(lài) npm intall webpack-bundle-analyzer –save-dev
其次 在vue.config.js文件配置
chainWebpack: config => {
? ? ? ? config
? ? ? ? ? ? .plugin('webpack-bundle-analyzer')
? ? ? ? ? ? .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
? ? }
可以再package.json加入啟動(dòng)的命令
"scripts": {
"analyz": "use_analyzer=true npm run serve"
}效果圖
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue.js實(shí)現(xiàn)全屏顯示功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
下面小編就為大家分享一篇vue獲取當(dāng)前激活路由的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
關(guān)于Vue中過(guò)濾器的必懂小知識(shí)
vue過(guò)濾器可以在不改變?cè)紨?shù)據(jù)，只是對(duì)數(shù)據(jù)進(jìn)行加工處理后返回過(guò)濾后的數(shù)據(jù)再進(jìn)行調(diào)用處理,下面這篇文章主要給大家介紹了關(guān)于Vue中過(guò)濾器必懂小知識(shí)的相關(guān)資料,需要的朋友可以參考下2021-10-10
關(guān)于vuex的數(shù)據(jù)持久化處理方式
這篇文章主要介紹了關(guān)于vuex的數(shù)據(jù)持久化處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
ESLint是一個(gè)QA工具，這篇文章主要介紹了詳解ESLint在Vue中的使用小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Vue.js基礎(chǔ)指令實(shí)例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
這篇文章主要為大家詳細(xì)介紹了Vue.js基礎(chǔ)指令實(shí)例，各種數(shù)據(jù)綁定、表單渲染大總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
iView-admin 動(dòng)態(tài)路由問(wèn)題的解決方法
這篇文章主要介紹了iView-admin 動(dòng)態(tài)路由問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10
vue使用echarts實(shí)現(xiàn)三維圖表繪制
這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08
Vue中textarea自適應(yīng)高度方案的實(shí)現(xiàn)
本文主要介紹了Vue中textarea自適應(yīng)高度方案的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Vue中如何使用Axios發(fā)送FormData請(qǐng)求
Axios提供了簡(jiǎn)單而強(qiáng)大的API來(lái)處理HTTP請(qǐng)求,而FormData提供了用于構(gòu)建表單數(shù)據(jù)的API,這篇文章主要介紹了Vue中如何使用Axios發(fā)送FormData請(qǐng)求,需要的朋友可以參考下2024-07-07