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之间的映射关系文件。（就是一个桥梁）
这玩意就是辅助我调试用的，正式站其实作用不大，而且处于安全考虑，可以直接干掉。
3.如何优化
因为 是基于 vue 构建的项目，所以在vue.config.js文件中，添加productionSourceMap: false 即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| $ tree dist/js
dist/js
├── 156.3e27fe8b.js
├── 212.281bdf69.js
├── 227.a301df0c.js
├── 283.e3b359fc.js
├── 512.491dfd27.js
├── 524.0435b7d8.js
├── 534.b0e5796e.js
├── 62.56df25c9.js
├── 628.e365b99a.js
├── 693.ef62c775.js
├── 779.a58a76eb.js
├── 799.348044de.js
├── 805.abcfd6f8.js
├── app.019ddae1.js
└── chunk-vendors.82a42815.js
0 directories, 15 files
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| $ tree dist/js
dist/js
├── 156.60d3698c.js
├── 156.60d3698c.js.map
├── 212.9d385e5c.js
├── 212.9d385e5c.js.map
├── 227.33f46797.js
├── 227.33f46797.js.map
├── 283.2bb3d6f0.js
├── 283.2bb3d6f0.js.map
├── 512.84fc8667.js
├── 512.84fc8667.js.map
├── 524.c0d6339a.js
├── 524.c0d6339a.js.map
├── 534.d3e4e3d1.js
├── 534.d3e4e3d1.js.map
├── 62.0ccf2bfb.js
├── 62.0ccf2bfb.js.map
├── 628.a386442a.js
├── 628.a386442a.js.map
├── 693.1e823f51.js
├── 693.1e823f51.js.map
├── 779.fbe74adb.js
├── 779.fbe74adb.js.map
├── 799.3f527b29.js
├── 799.3f527b29.js.map
├── 805.8805700a.js
├── 805.8805700a.js.map
├── app.0a795711.js
├── app.0a795711.js.map
├── chunk-vendors.731b4bbf.js
└── chunk-vendors.731b4bbf.js.map
0 directories, 30 files
|
进一步优化，按照开发环境与生产环境区分，开发环境关闭，方便开发调试。
微信