重構之路：打包速度優化和結尾

開始

先來講一下，可能有些人會說怎麼這麼快就結尾了？其實所有的重構確定是還沒完成的，這裏說的結尾是前期的配置已經基本完成了。原本還想寫一個webpack打包速度的博文，可是發現打包速度的優化能夠寫的並很少（也多是我孤陋寡聞...），下面大概寫一下。

happypack

webpack原本是單線程的去打包，happypack的速度優化是經過多個線程來進行打包，因此打包速度會比較快。

須要先去執行： yarn add happypack -D

而後在webpack.config.common.js裏：

const HappyPack = require('happypack');//頂部引入

//在js的匹配規則這裏
{
    test:/\.(js|jsx)$/,
    exclude: '/node_modules/',
    include:path.resolve(__dirname,'src'),
    use:'HappyPack/loader?id=js',//主要是這裏，將以前的所有剪切掉，替換成這樣
}


//在plugins裏(這裏是例子)，將剛纔剪切掉的拷貝過來：
plugins:[
    new HappyPack({
        id:'js',//注意這裏要和前面的id對應上
            use:[
                {
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ],
                        plugins:[
                            "@babel/plugin-transform-runtime",
                            ['import',{
                                libraryName:'antd',
                                libraryDirectory: 'es',
                                style:true
                            }]
                        ],
                         //注意cacheDirectory，這裏也是一個重要的打包速度優化點，
                         打開這個能夠緩存打包過的內容
                        cacheDirectory: true  
                    }
                }
            ]
    }]
]
複製代碼

Dllplugin

Dllplugin也是一個打包速度的優化，在上一章已經講過了，其實只要儘可能減小打包的體積自己就會加快打包的速度了，Dllplugin將一些大的庫和框架給單獨打包起來，這樣平時打包的時候就不須要去打包這部分的代碼，就會大大加快打包速度了。

結尾

到這裏太重構之路篇章的基本配置是差很少完成了，接下來就是寫業務代碼了（悲催），後面會講一些在寫業務代碼過程當中遇到的坑點。