关于npm run build看到各个文件的大小分辨出是哪个文件占用过大问题

最新推荐文章于 2024-11-13 11:35:59 发布
原创 最新推荐文章于 2024-11-13 11:35:59 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #node.js

本文介绍如何使用webpack-bundle-analyzer插件分析Webpack构建的包大小，通过在webpack.prod.conf.js或vue.config.js中配置，及在package.json中设置npm脚本来实现。这有助于开发者理解项目的依赖关系和优化构建过程。

npm install --save-dev webpack-bundle-analyzer

在webpack.prod.conf.js配置，没有的话可以在项目根目录起一个vue.config.js文件

const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin;

在moudel plugins 配置
只需要配置红色部分
在package.json配置
“scripts”: {
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”
}，运行npm run build或者其他都可以

npm run build 打包超出内存 Reached heap limit Allocation failed - JavaScript heap out of memory
zxdxiaoyuanyuan的博客
07-12 2288
命令行输入下面的命令会输出当前 max-old-space-size 大小，单位是 MB。的时候都会抛下面的异常，且最后一行输出异常码为134。命令行中输入以下命令。
Vue npm run build 内存溢出
taoCSD的博客
06-24 968
npm run build 内存溢出
vue项目下常用的npm命令
质量不太好的博客
04-20 4565
vue项目下常用的npm命令
npm start 报错：文件大小写不区分导致报错或者警告
轻风细雨_林木木
02-24 2117
这里是说文件大小写没有区分，因为Linux下是严格区分大小写，所以这里只需要修改项目文件的name不要是大写就好。
webpack-bundle-analyzer文件大小分析工具
yihanzhi的博客
12-11 3315
1、安装分析工具： npm intall webpack-bundle-analyzer -D 2、webpack.prod.config.js 中添加如下代码 if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnaly...
基于Vue的大屏数据可视化组件库源码
项目说明文档详细介绍了如何安装依赖（npm install）、启动开发服务器（npm run serve）、打包发布（npm run build）等操作步骤，降低了学习门槛，非常适合学生作为课程设计、期末作业或毕业设计的参考模板。...
基于Canvas和SVG的GUI图形构建技术
而“npm run build”则指向源码编译与打包过程，可能是将 TypeScript 或 ES6+ 代码转译为浏览器兼容的 JavaScript，并进行压缩优化，以提升生产环境下的加载效率。这些实践均符合现代前端工程的最佳实践规范。 从...
TFLite Converter报错终极解析：90%开发者都遇到过的模型转换失败真相
!...# 1. TFLite Converter报错问题的...这些错误并非孤立现象，而是涉及算子支持、张量形状、数据类型、图结构等多维度问题的综合体现。本章将从整体视角剖析报错背后的系统性成因，揭示转换失败的本质规律，为后续深入解
Figma设计资产跨平台交付挑战：iOS_Android_Web适配统一的6大解决方案
!... # 摘要 Figma作为主流设计工具，在跨平台设计资产交付中面临标准化不足、平台渲染差异和手动传递效率低等核心挑战。本文系统探讨了构建统一设计系统的理论与实践路径...针对多端渲染不一致问题，研究了字体、布局及
CodeWarrior性能优化：提升编译与执行速度的5大策略
CodeWarrior作为一款集成开发环境，广泛应用于多种软件开发中，但其性能问题可能影响最终应用的效率和稳定性。本文详细探讨了CodeWarrior性能问题的诊断与分析，包括使用性能分析工具、识别代码瓶颈以及提出优化建议...
vue打包优化
weixin_44707050的博客
04-12 1209
1.下载webpack打包分析插件 npm install webpack-bundle-analyzer --save-dev 2.package.json中，scripts->build 添加--report "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report" }, 3.创建vue.config.js文件 const BundleAn
vue2打包生成分析报告
weixin_46003296的博客
05-23 774
最近在优化项目，但是又不知道该优化哪些部分，所以使用了打包分析来分析。3、在vue.config.js中使用。2、分析各个插件打包用时。分析打包过后的包的大小。
前端打包优化
weixin_43914605的博客
09-19 1050
前面项目打包优化
关于vue的npm run dev和npm run build
weixin_30852367的博客
06-30 2832
├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpa...
vue项目中每个插件的大小
qyp_slw的博客
11-25 1319
废话：当我们制作vue项目时，随着功能的增多会发现引入的插件越来越多，当然这不是一件好事情，等到一定是后我们就会接受到领导的一句：“你给咱们看一下，咋们网站别人访问怎么怎么慢呢？” 要点：这时，你就要主要到 是因为插件引入过多的原因，在哪里可以看出他的大小呢？ 前端的都知道这个地方，我就不解释了，把这个下载下来，看一下大小，正常项目的大小都是在1.2M左右， 然后，我们知道了vendorjs的总...
快速查看当前node项目使用的依赖并生成图表
momDIY的博客
12-09 5224
node项目快速查看依赖使用情况 命令 在打包的命令后边加一个--report参数 npm run build --report 示例 END
执行npm run build -- --report后，生产report.html文件是什么？
最新发布
renqq001的博客
11-13 890
执行npm run build -- --report后，生产report.html文件是什么？
打包优化-包大小分析
weixin_46185369的博客
11-06 1322
目标 对开发的应用进行包大小分析 包大小分析 我们集成了功能，写了很多组件，最终都会打包成一堆文件（js目录下会有很多.js文件），每个包大小如何呢？ 我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析，它的使用非常简单 npm run preview -- --report 这个命令会从我们的入口**main.js**进行依赖分析，分析出各个包的大小，方便我们进行观察和优化 执行完这个命令，我们会看到控制台中如下类似的输出 访问：http://localhost:9
Vue-cli3项目查看项目打包大小
weixin_44041414的博客
05-05 3252
Vue项目优化 在平时的vue开发项目中，性能优化是必不可少的，一般来讲除了在Chrome调试工具performance可以在网页加载时准确定位到加载缓慢的代码段或者资源，我们也可以对打包好的代码进行可视化分析 （查看哪个包比较占用空间），从而做到精确定位到需要优化的模块。 方法一：在线调试（webpack-bundle-analyzer） 首先安装webpack插件 npm i webpack-boundle-analyzer -D 或者 npm i webpack-boundle-analyzer
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值