美文网首页前端Vue专辑
vue项目部署优化之map文件

vue项目部署优化之map文件

作者: 滴流乱转的小胖子 | 来源:发表于2019-07-01 20:57 被阅读0次

前戏

公司的基于iview-admin的中后台管理系统,这个vue项目随着日积月累的功能“堆砌 ”。项目无论体积还是部署速度都已经有慢有大,所以在工作的间隙,萌生对项目进行优化,特此记录。

正文

1.dist中“大”文件----map

为优化前的dist文件大小,将近40m,部署发布时间超过3分30秒

优化前dist文件夹大小

打开dist/js文件夹,文件是这样的。很多和js文件同名的map后缀文件,而且size还很大。

优化前js文件夹内容

2.map是个什么玩意

source map文件是js文件压缩后,文件的变量名替换对应、变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下。 比如压缩后原变量是map,压缩后通过变量替换规则可能会被替换成a,这时source map文件会记录下这个mapping的信息,这样的好处就是说,在调试的时候,如果有一些JS报错,那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试,这样会给我们带来很大的方便!

而这种还原性调试功能,目前只有chorme才具有。

一句话,就是压缩的js与未压缩源文件js之间的映射关系文件。(就是一个桥梁)

so

这玩意就是辅助我调试用的,正式站其实作用不大,而且处于安全考虑,可以直接干掉。

3.如何优化

因为我是基于vue-cli3构建的项目,所以在vue.config.js文件中,添加productionSourceMap: false即可

添加属性

之后直接编译 npm run  build 就可以看到效果

dist整个文件夹大小腰斩 优化js文件夹

进一步优化,按照开发环境与生产环境区分,开发环境关闭,方便开发调试。

尾声

优化还在进行中,未完待续!

相关文章

  • vue项目部署优化之map文件

    前戏 公司的基于iview-admin的中后台管理系统,这个vue项目随着日积月累的功能“堆砌 ”。项目无论体积还...

  • vue 打包后 vendor.js 文件过大解决方案

    vue 打包后 vendor.js 文件过大解决方案 vue 项目打包过后会生成. map 文件,而且. map ...

  • Vue项目上线--优化

    项目拖了这么久终于差不多要上线了,记录一下Vue项目的一些优化。 1. 去掉打包后的.map文件 运行npm ru...

  • vue项目优化一

    vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能 第一步,在vue项目中安装依赖并将pro...

  • Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

  • 博客网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

  • 部署Vue项目

    部署文件 使用vue cli 开发项目,执行npm run build命令生成dist静态文件,将dist文件包放...

  • vue项目部署优化之cdn

    前戏 vue项目中,有个非常大的文件vendor.js,为什么这么大? 引入到工程中的所有js、css文件,编译时...

  • vue 项目部署找不到 js css 文件

    vue 项目部署找不到 js css 文件 vue-cli@3 在 vue-cli@3 中你需要为你 webpac...

  • 发现•分享—2019-01-30~2019-02-5

    项目案例 vue-cli3 项目从搭建优化到docker部署 文章 JS ?喜大普奔,ES2019登场 JavaS...

网友评论

    本文标题:vue项目部署优化之map文件

    本文链接:https://www.haomeiwen.com/subject/xoricctx.html