利用report分析vue項目中各文件大小
report分析vue項目中各文件大小
vendor.js
在Vue項目中，引入到工程中的所有js、css文件，編譯時都會被打包進vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。
若是引入的庫眾多，那么vendor.js文件體積將會相當?shù)拇?，影響首開的體驗。
vue-cli 4 使用report分析vendor.js
Vue Cli（@/vue/cli）自帶的webpack包體積優(yōu)化工具，它可以查看各個模塊的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)上很多說要先安裝webpack-bundle-analyzer包，其實不需要安裝。
3、運行 npm run report 后
會在 build 的同時，在dist目錄會生成一個report.html，打開后可看到各文件占用大小
vue項目打包文件大小分析
vuecli3.0項目搭建與webpack-bundle-analyzer分析
首先說一下vuecli低版本與cli3.0的項目結構的區(qū)別
少了build config 文件夾 如果需要進行webpack等配置
需要在根目錄新建 vue.config.js
cli低版本
cli高版本
vue.config.js 文件內容 本次只記錄 打包大小分析以及優(yōu)化包大小
module.exports = {
publicPath: './',
// 輸出文件目錄
outputDir: 'dist',
// 靜態(tài)資源目錄 (js, css, img, fonts)
assetsDir: 'assets',
// webpack-dev-server 相關配置
devServer: {
// 默認打開瀏覽器
open: true,
// 端口號
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',
//入口起點的最大體積
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
首先 下載依賴 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加入啟動的命令
"scripts": {
"analyz": "use_analyzer=true npm run serve"
}效果圖
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue?如何配置eslint代碼檢查，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決Vue使用bus總線時,第一次路由跳轉時數(shù)據(jù)沒成功傳遞問題
這篇文章主要介紹了解決Vue使用bus總線時,第一次路由跳轉時數(shù)據(jù)沒成功傳遞問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享
下面小編就為大家分享一篇vue中實現(xiàn)先請求數(shù)據(jù)再渲染dom分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了詳解Vue 實例中的生命周期鉤子，在Vue的整個生命周期中，它提供了一些生命周期鉤子，給了我們執(zhí)行自定義邏輯的機會。2017-03-03
vue3+Element Plus實現(xiàn)自定義穿梭框的詳細代碼
找到一個好用的vue樹形穿梭框組件都很難,又不想僅僅因為一個穿梭框在element-ui之外其他重量級插件,本文給大家分享vue3+Element Plus實現(xiàn)自定義穿梭框的示例代碼,感興趣的朋友一起看看吧2024-01-01
vue3+vite項目運行后實現(xiàn)自動在瀏覽器打開
文章介紹了如何使用Vue 3和Vite創(chuàng)建項目,并提供了一個簡單的步驟指南,包括在package.json文件中進行配置,希望這篇經(jīng)驗分享對大家有所幫助,并鼓勵大家支持腳本之家2026-01-01
這篇文章主要介紹了vue項目打包步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了開發(fā)一個封裝iframe的vue組件，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
詳解Vue.js搭建路由報錯 router.map is not a function
這篇文章主要介紹了詳解Vue.js搭建路由報錯 router.map is not a function，非常具有實用價值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Vue實現(xiàn)剪貼板復制功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12