webpack常用的一些优化

Webpack是现在主流的功能强大的模块化打包工具，在使用Webpack时，如果不注意性能优化，有非常大的可能会产生性能问题，性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等，因此性能优化也主要从这些方面来分析。

1.开发环境优化

1.1 resolve.modules

告诉webpack在那个文件夹下面去找第三方模块，避免了层层的查找

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

1.2 resolve.alias

对一些第三方比较打的库，指定其文件夹位置，避免了层层的查找

resolve:{
    alias:{
       'vue':patch.resolve(__dirname, './node_modules/vue/dist/vue.min.js'),
       'react':patch.resolve(__dirname, './node_modules/react/dist/react.min.js') 
    }
}

1.3 配置loader时，通过test、exclude、include缩小搜索范围

1.4 开启happypack多线程解析

我一般在解析js文件的时候会使用

module:{
    rules:[
        {
            test: /(\.js|\.jsx)$/,
            exclude: resolve(__dirname, 'node_modules'),
            use: ['happypack/loader?id=babel'],
        },
    ]
},
plugins:[
    new happypack({
        id:"babel",
        loaders:[
            {loader:'babel-loader?cacheDirectory=true'}
        ]
    })
]

1.5 开启paralleUgilifyPlugin多线程压缩js文件

new ParallelUglifyPlugin({
            uglifyJS: {
                output: {
                    //去除空格
                    beautify: false,
                    //去除注释
                    comments: false
                },
                compress: {
                    //删除所有的console
                    drop_console: false
                }
            }
}),

1.6 开启热模块替换HMR

模块热替换不刷新整个网页而只重新编译发生变化的模块，并用新模块替换老模块

/**
* 启用webpack内置的webpack插件(开启HMR)
*/
 new webpack.HotModuleReplacementPlugin(),

devServer:{
    hot:true
}

2.生产环境优化

2.1 单独提取css代码MiniCssExtractPlugin

{
    test:/\.css$/,
    use:[MiniCssExtractPlugin.loader,css-loader]
}

new MiniCssExtractPlugin({
    filename:'css/[name].[hash:10].css'
})

2.2压缩css OptimizeCssAssetsWebpackPlugin

new OptimizeCssAssetsWebpackPlugin()

2.3 代码分割 optimization

optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 30000, //块的最小大小,只有超过30k,才会进行代码分割
            maxSize: 0,
            minChunks: 1, //模块至少需要被引用1次
            maxAsyncRequests: 5, //最大打包数量
            maxInitialRequests: 3, //entry入口最大数量
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    reuseExistingChunk: true
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        },
        runtimeChunk: {
            name: entrypoint => `manifest.${entrypoint.name}`
        }
    }

2.4 按需加载

import(/*webpackChunkName:"one*/'./one.js').then(data=>{
    console.log(data);
})

2.5 CDN引入第三方包

externals:{
    jquery:"jQuery",//告诉webpack哪些第三方包不参与打包，优化首屏加载速度
}

2.6 source-map

我的用法：

devtool: process.env.NODE_ENV == 'development' ? 'eval-source-map' : 'cheap-module-source-map',

2.7 Tree Shaking剔除无用代码