Vue CLI 3 配置分解之 productionSourceMap

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

 

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

 

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 就可以看到效果