2021-11-21 学习计划与总计红宝书第八章 done 将 CA 放在 ResNet 上面验证一下，在 DenseN

红宝书第八章 done
将 CA 放在 ResNet 上面验证一下，在 DenseNet 上多加几个 CA 试试效果
剑指 OFFER 前十题
webpack

红宝书第八章

javascript 中的继承问题

原型链继承：这是通过将一个子构造函数的 prototype 属性指向一个父构造函数的实例，但是有如下问题：
- 原型对象中包含的引用指是共享的，比如原型对象上有一个数组，任何一个实例去操作数组，别的实例也会受到影响
- 子构造函数在实例化时不能给父构造函数动态地传值
盗用构造函数：在子构造函数中调用父构造函数

function Father(firstName){
    this.firstName = firstName
}
function Son(firstName, lastName){
    Father.call(this, firstName)
    this.lastName = lastName
}

问题：子类不能访问父类原型对象上的方法

组合继承
- 通过原型链继承方法
- 通过盗用构造函数来继承属性

function Father(firstName){
    this.firstName = firstName
    this.colors = ['pink', 'black', 'white']
}
Father.prototype.sayName = function(){
    console.log(this.name)
}
function Son(firstName, lastName){
    Father.call(this, firstName)
    this.lastName = lastName
}
Son.prototype = new Father()

问题：父类构造函数被调用了两次，子类构造函数调用时，会在内部调用一次；给子类构造函数添加原型对象的时候还会调用一次

原型式继承其实就是 Object.creat(), 将源对象作为新对象的原型对象

适用于子类共享父类，比如两个儿子共享一个爸爸，爸爸有个居住地，两个儿子（不能独立之前）的住宅一直都随着爸爸的住宅的改变而改变

function object(o){
    function F(){}
    F.prototype = o
    return new F()
}

寄生式继承寄生式继承其实就是在原型式继承的基础上多做了一步操作-- 为子类手动添加自己的方法

function object(o){
    function F(){}
    F.prototype = o
    return new F()
}
function createAnother (original){
    let clone = object(original)
    clone.sayHi = function(){
        console.log('hi')
    }
}

寄生式组合继承

我自己的理解，寄生式组合继承其实是解决了调用两次父类构造函数的问题。

怎么解决的呢？我们看看在哪少调用了。

答：减少了在给子类构造函数修改原型对象的操作。

那他是怎么减少的呢？

答：寄生组合式继承不使用 new 一个父类，而是相当于使用一个空构造函数（这个构造函数本身不会不会产生任何属性），然后将这个构造函数的原型指向父类构造函数，当我们调用这个构造函数时，就产生了一个空对象（空对象的原型指向了父类构造函数的原型），最后再将子类构造函数的原型指向这个空对象，这样就形成了原型链

function Father(firstName){
    this.firstName = firstName
    this.colors = ['pink', 'black', 'white']
}

Father.prototype.sayName = function(){
    console.log(this.name)
}

function Son(firstName, lastName){
    Father.call(this, firstName)
    this.lastName = lastName
}

function object(o){
    function F(){}
    F.prototype = o
    return new F()
}

function inheritPrototype(Son, Father){
    let prototype = object(Father.prototype)
    prototype.constructor = Son
    Son.prototype = prototype
}

webpack

babel 缓存（只用缓存的话，很快更新代码，没有过期的话，最新效果就看不到）

            {
                test: /\.js$/,
                excludes: /node_modules/,
                loader: 'babel-loader', 
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage',
                                corejs: { version: 3 },
                                targets: {
                                    chrome: '60',
                                    firfox: '50'
                                }
                            }
                        ]
                    ],
                    // 这里使用 babel 缓存,第二次构建时才会使用缓存
                    cacheDirectory: true
                }
            },

文件名打包时加一个哈希值（但是一个文件改变，所有缓存都失效），可以使用 chunkhash 来优化，使用 contenthash 来进一步优化，会根据文件内容来优化

3.代码分割

通过多入口文件分割

// 将 node_module 中的 js 文件单独打包成一个 chunk 最终输出，配合多入口文件使用，多入口文件中的公共以来就打包成一个 chunk
optimization: {
    splitChunks: {
        chunks: 'all'
    }
}

懒加载懒加载就是不是一上将所有的资源加载，而是等到触发某些条件的时候再去记载（通过 import.then 的形式），懒加载的前提是代码分割
预加载（prefetch）兼容性较差和正常加载的区别：正常加载是多个请求并行的，这样就会占用带宽，使得其他资源加载变慢，而预加载是等其他资源都加载完成之后，再去加载相应的资源
PWA（渐进式网络开发）离线可访问 workbox --> workbox-webpack-plugin
多进程打包 thread-loader，主要针对 babel-loader，将 thread-loader 放在想要优化的前面