vue项目打包后使用reverse-sourcemap反编译到源码(详解版)

简介: vue项目打包后使用reverse-sourcemap反编译到源码(详解版)

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

首先得说一下,vue项目中productionSourceMap这个属性。该属性对应的值为true|false

  productionSourceMap: true,时:

  1、打包后能看到xxxx.js.map文件,map文件够通过反编译看到源码;

  2、打包后会导致文件变大(因为多了很多map文件导致的);

  当productionSourceMap: false,时:

  1、打包后无法看到xxxx.js.map文件,所以无法进行反编译;

  2、打包后的文件很小(因为没有map文件);

 如下两张截图就可以验证2的描述

productionSourceMap: false,打包后文件的大小2.8M

productionSourceMap: true,打包后文件的大小9.6M

那么对于productionSourceMap: true的情况,我们如何对打包后的通过编译看到源码呢
  • 步骤一:全局安装reverse-sourcemap,终端输入如下内容
sudo npm install --global reverse-sourcemap

步骤二:以0.474fa9e4cdfb9c4219bc.js.map文件为例进行反编译。

步骤三:为了更加直观看到效果,先将步骤二的0.474fa9e4cdfb9c4219bc.js.map文件放到自定义的aimFile目录中

步骤四:打开terminal终端,cd到aimFile目录,然后输入

reverse-sourcemap --output-dir sourceCode 0.474fa9e4cdfb9c4219bc.js.map

实现将反编译后的源码输入到sourceCode目录

  • 步骤五:可以看到反编译成功了,而且也可以得知xxxx.js.map文件经过反编译后得到的源文件,实际上是很多文件的集合。

前端面试题库 (面试必备)      推荐:★★★★★

地址:前端面试题库

相关文章
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
7 1
|
1天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
1天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
1天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
1天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具(npm, webpack, Git)。 - 从Vue官方文档学习基础,包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex,掌握路由管理和状态管理。 - 学习自定义指令和Mixins,优化性能技巧。 - 实战项目练习,加入Vue社区,阅读相关资源,提升技能。 - 关注Vue生态,持续实践和创新,以适应不断发展的框架。
5 0
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的机电公司管理信息系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的机电公司管理信息系统附带文章源码部署视频讲解等
9 0
|
1天前
|
缓存 JavaScript 算法
vue 性能优化
vue 性能优化
10 0
|
10月前
|
JavaScript 容器
【Vue源码解析】mustache模板引擎
【Vue源码解析】mustache模板引擎
37 0
|
12月前
|
JavaScript 前端开发
vue源码解析之mustache模板引擎
vue源码解析之mustache模板引擎
73 0
|
12月前
|
JavaScript
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
01 - vue源码解析之vue 数据绑定实现的核心 Object.defineProperty()
65 0