webpack打包后产生map文件造成dist文件体积过大的问题

最新推荐文章于 2024-05-04 02:49:21 发布

会不会惊动山神

最新推荐文章于 2024-05-04 02:49:21 发布

阅读量723

点赞数 1

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_44528408/article/details/125189807

版权

运行npm run build命令后发现dist文件体积为10.8Mb

查看后发现js文件夹9.8Mb大小，有许多.map文件占用体积较大，搜索发现map文件的作用是：
项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

但是部署在生产环境无用，且占用了多余的存储内存；

解决方式：将config/index.js文件中的

productionSourceMap: false

打包后的文件体积为2.93Mb

参考文章：https://blog.csdn.net/qq_37609418/article/details/121547298

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

会不会惊动山神

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

webpack打包生成的map文件_一站式搞明白webpack中的代码分割

weixin_33605464的博客

01-05

1165

上次分析到通过devtool的配置项来设置sourcemap，在线上环境可以通过设置成cheap-module-source-map来生成单独的map文件，但是map文件在线上环境会不会每次都加载呢？如果加载的话，会不会造成带宽和请求的浪费呢？笔者也有这样的疑问，于是在网络上查了一下。后来才了解到，在浏览器中，只有在调试模式下才会自动下载map文件，平时线上环境的话，是不用担心这个问题...

解决webpack打包文件过大的问题

jlin991的博客

03-13

1万+

最近做了一个H5小游戏，用React实现UI，基于canvas实现动画的逻辑。用webpack -p 打包发现输出的index.bundle.js文件体积非常大。以下是我的webpack的配置文件：var webpack=require('webpack'); var path=require('path'), node_modules=path.resolve(__dirname,'n

参与评论您还未登录，请先登录后发表或查看评论

webpack打包生成的map文件_[转] Webpack的devtool和source maps

weixin_39708737的博客

12-22

371

source mapsWebpack打包生成的.map后缀文件，使得我们的开发调试更加方便，它能帮助我们链接到断点对应的源代码的位置进行调试(//# souceURL)，而devtool就是用来指定source-maps的配置方式的。以下是官方文档的说明：source maps开发工具(Devtool)此选项控制是否生成，以及如何生成 Source Map。以下是官方文档的配置选项：devtool...

解决webpack打包体积过大的问题

败毒的博客

09-09

3100

项目中引用了vue、vue-router、axios、element-ui、qs等第三方库，导致打包后文件体积过大。 1 通过cdn引入第三方库。 1.1 在/build/webpack.base.conf.js中，配置externals 配置cdn主要利用了externals（外部的）选项，key表示的是包名，即package.json中包的名称，value表示的是包导出的类名。比如说vu...

vue打包优化dist文件过大，导致资源加载多、首页白屏问题

zxo_apple的博客

08-20

3474

dist打包后经常遇到包过大，有的甚至超过10M等，这会导致我们项目在首次进入时，由于资源加载过多而导致页面白屏的情况，针对这种情况，我们可以对以下几个方便进行优化一、设置productionSourceMap 在vue.config.js文件中，设置productionSourceMap为 false；表示生产环境不生成sorce map文件（source map 就是资源地图。其作用就是定位，用于定位浏览器控制台输出语句在项目文件的位置，以便于出现问题时快速找到问题位置。） module.export

如何解决webpack打包后，dist文件过大的问题

初心勿忘

06-01

3720

一晃，用vue两个多月了，在用vue.js写单页面应用时，随着项目的进展，出现打包后的JavaScript包越来越大，影响页面加载。我们都知道图片的懒加载。当图片不出现在视口时，我们不加载这张图片。那么我们是不是可以实现，路由的懒加载。当我们用到某个路由后，才去加载对应的组件，这样就会更加高效。实现这样的功能，我们需要结合Vue的异步组件和webpack的code splitting featur...

Vue打包后出现一些map文件的解决方法

08-28

保存更改后，再次执行打包命令（例如`npm run build`或`cnpm run build`），这次打包生成的`dist`目录下就不会包含.map文件了。这样既能保证生产环境的代码简洁高效，又避免了额外的.map文件占用空间。需要注意的...

详解webpack打包

最新发布

2401_84437095的博客

05-04

103

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

webpack打包工具及原理

m0_62877814的博客

02-13

2176

webpack打包工具原理及特性分析

webpack 打包全流程

harvestUachieve的博客

08-20

4338

只有在脚本使用时才会调用。ES6渐渐取代CommonJs。

webpack打包生成的map文件_【webpack】你所不知道的sourceMap

weixin_31047023的博客

02-05

5330

sourceMap的作用通常，js代码出错，控制台会提示第几行第几列代码出错。但是webpack打包压缩后的代码，都被压缩到了一行，变量也变成了a,b,c,d。代码出错，控制台就没法正确的提示错误位置。sourceMap就可以解决这个问题。sourceMap就是一个信息文件，里面储存着打包前的位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。具体如何编码，可以看下阮一峰的文章。有...

webpack 图片处理和优化

ivenqin的博客

05-16

767

本节我们来学习如何在 webpack 中处理和优化图片。前面我们讲过，webpack 中只有 JS 类型文件才能够被识别并直接打包，其他类型的文件，例如 CSS、JS、图片等，则需要通过特定的 loader 来进行加载打包。而在实际项目中，我们也会经常用到图片，所以本节我们就来看一下如何在 webpack 中打包图片。如何在webpack中打包图片在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器，这两个加载器的功能基本一样，但是还是存在一些区别： f

基于webpack或者rollup打包后的map文件的上传以及删除

qq_51156678的博客

01-15

1043

/ 删除map文件log(colors.green(`${name}删除成功!`));log(colors.red(`${name}删除失败!`));});至此，webpack的插件就结束了。基于rollup打包的plugin步骤跟webpack的差不太多，唯一有区别的就是获取map文件的方式以及构建plugin的方式。

打包后生成很大的.map文件的问题

汤玉鹏

10-12

1286

项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。而生成的.map后缀的文件，就可以像未加密的代码一样，准确的输出是哪一行哪一列有错可以通过设置来不生成该类文件。但是我们在生成环境是不需要.map文件的，所以可以在打包时不生成这些文件：在config/index.js文件中，设置productionSourceMap: false,就可以不生成....

vue webpack压缩代码_Vue-cli3脚手架3的webpack打包优化压缩

weixin_39748838的博客

12-20

692

Vue-cli3脚手架3的webpack打包优化压缩网上很多关于webpack优化的，但是很多都是针对bable6或者vue-cli2或者webpack2.0的。当前版本vue-cli3bable7webpack4.01.优化路由路由采用懒加载例子{path: '/loginMode',name: 'loginMode',component: () => import( /* webpack...

Vue打包后JS文件夹中出现一些map文件的解决方法(map.js文件移除掉

weixin_43738802的博客

05-06

2058

Vue打包后JS文件夹中出现一些map文件的解决方法(map.js文件移除掉) 1.在项目下进入目录：项目包/config/index.js 找到productionSourceMap /* Source Maps */ productionSourceMap: true, // 把这边的true改为false // https://webpack.js.org/configuration/devtool/#production devtool: '#source

Vue打包后JS文件夹中出现一些map文件的解决方法

吴佳强的博客

08-19

2436

1.在项目下进入目录：项目包/config/index.js 找到productionSourceMap /* Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', 2.将productionSourceMap的true改为false即可 productionSo

webpack项目build打包之后出现.map后缀文件的作用

wiyon的博客

05-31

1546

build之后占用体积最大的是.map文件，项目打包之后，代码是经过压缩加密的，如果运行报错是不知道哪里报错的，map文件就是就像未加密的文件，可以准确知道哪一行哪一列报错解决方法： react：webpack.config.js中的devtool：false vue：config/index.js 中改为 productionSourceMap: false 就不生成map文件 ...

webpack build打包出的 map 文件有什么用，能不能删或者打包不生成map文件？