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

开始

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

结尾

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