webpack打包速度优化

配置resolve.modules

webpack默认顺序是在当前模块的node_modules目录下，没找到再去上级目录寻找，一般一个项目只有一个根目录下的node_modules,配置指明存放第三方模块的绝对路径可以减少寻址

module.exports = {
    resolve: {
        modules: [
            path.resolve(__dirname, 'node_modules')
        ]
    }
}

配置loaders的include和exclude

include：要处理的目录
exclude：不处理的目录

通过配置这两项属性可以减少不必要遍历从而提高打包性能

loaders: [
    {
        test: /\.vue$/,
        loader: 'vue-loader',
        include: [path.resolve(__dirname, 'src')],
        exclude: /node_modules/
    }
]

使用happypack

happypack：开启系统CPU最大线程，通过插件将loader包装，暴露id，直接module.loaders引用该id

plugins: [
    new HappyPack({
        id: 'js',
        threads: 4,//线程数
        loaders: ['babel-loader']
    })
],
loaders: [{
    test: /\.js$/,
    loader: 'babel',
    happy: { id: 'js' }
}]

externals

externals去除不需要打包的静态资源，使用CDN加载

externals: {
    'jquery': 'jQuery'
}

CND引用

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

cache-loader

将loader编译结果写入缓存，再次构建如果文件没有发生变化则会直接拉取缓存,添加在时间长的 loader 的最前面。

{
    test: /\.ext$/,
    use: ['cache-loader', ...loaders],
    include: path.resolve('src'),
},