重构之路：打包速度优化和结尾

开始

先来说一下，可能有些人会说怎么这么快就结尾了？其实全部的重构肯定是还没完成的，这里说的结尾是前期的配置已经基本完成了。本来还想写一个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将一些大的库和框架给单独打包起来，这样平时打包的时候就不需要去打包这部分的代码，就会大大加快打包速度了。

结尾

到这里过重构之路篇章的基本配置是差不多完成了，接下来就是写业务代码了（悲催），后面会讲一些在写业务代码过程中遇到的坑点。