前言

随着写代码的深入，其实大家都懂的，代码写的越多，不表达能力会提升，也有些时候，可能效果会适得其反我这几天也在做公司的项目，遇到了很多问题，大家可能都遇到过的，在此，我这边记录下，如有大神看到，可以指点下，对于其他朋友，也是借鉴下，小白我水平能力一般，写的不好，不要打我呀 打波我的github广告先 我的github地址

11-20之我所不知道的问题

1.在vue项目打包后，发现上传到服务器的文件，竟然大于8MB之多,这是什么鬼? 如下的截图

,上传到服务器，估计会哭的不行，主要这个打包主要测试了样式和速度，当第一次访问的时候，速度不忍直识(中文不太好，见谅)，看了谷歌的network选项，速度像蜗牛,真的醉了，所以打开服务器(本人水平是菜鸟级，只能用用winows的iis了)，，找到了dist=>static=>js中的带.map文件,如下截图

,真的很大，所以就去网上查询了问题，并到了解决方法，我的解决方法如下 (如果你的项目是的结构不是vue cil3)的话(其实3也可以这样操作的)，如下

，根据红色部分找到(productionSourceMap，根据vue cil3官网说明的进行设置就行了，它的value值默认为true,所以在打包后，会出现.map文件，只要将它的value值设置为false即可，然后重新打包文件就只会很小很小) 截图如下，将productionSourceMap:true改成productionSourceMap:false即可，如下

,然后重新打包(打包时间，慢慢等) 最终打包后的截图如下（请看红色部分）

,是不是小了近8倍左右，速度方面会提升很多。

打包成功，看项目/dist/static/js/xxxx.js 已经没有各种.map文件，问题解决。

【注】.map文件的作用：

项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

---

2.js(es6基础知识点)[只是我个人的简单理解，大神可以省过] es6之Symbol:它是独一无二，具体数据私有化、保护属性的基本功能(无论它创建多少个对象出来，都不会相同的，返回结果都是false),如下

var s1=Symbol() //Symbol()
var s2=Symbol() //Symbol()
var s3=Symbol('key') //Symbol(key)
var s4=Symbol('val') //Symbol(val)
console.log(s3===s4)//如果值就算一样，返回结果为false

下面给出一个简单的例子

 var Person=(function () {
        var _gender=Symbol('gender');
        function P(name,sex) {
            this.name=name
            this[_gender]=sex
        }
        P.prototype.say=function () {
            console.log(this[_gender])
        }
        return P
    })()
    var p1=new Person('python','男')
    console.log(p1[Symbol('gender')])  //undefined

看到这个例子，对于有基础的朋友不难吧，也就是es5中的面向对象+闭包的基础代码 var _gender=Symbol('gender');根据上面的例子，来说明Symbol的特性，当外部也调用同样的Symbol('gender')返回的结果是undefined 为什么呢?原因几点:

1.由于 var _gender=Symbol('gender')它是在函数中创建的，属于局部变量，无法在外部被使用;

2.也因为Symbol()的特性，它这个变量被保存起来了，所以无法被直接调用，只能通过

P.prototype.say=function () {
            console.log(this[_gender])
        }

它可以调用_gender中的内容

3.解构赋值(对象中可以使用别名方式访问，如下代码)

let {foo :F,bar :B}={foo:'aaa',bar:'bbb'}
    console.log(F,B)   //aaa bbb 结果，与访问foo,bar效果一样，只不过，设置为别名原因是为了和全局创建的变量区别掉，如下的截图

,当定义和系统已定义好的变量重名时，那么对不起，会提示说变量已被重复定义了，所以如果遇到变量重名的时候，使用一个:别名是有好处的

4.Object.freeze(argas)的基本请点击

官网描述: Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。

const arrs=Object.freeze([1,2,3])
    arrs.push(4)
    console.log(arrs)

当参数被冻结的时候，是无法添加属性的内容的，会出现如下错误

Object.isFrozen(arrs) 

它用于判断这个参数是否是被冻结状态，如果是，返回true,否则返回false

以上内容是今天所遇到的或者学习到的内容，如果能够帮助大家的话，我很开心的，有什么建议可以留言哦，看到我会回复的