webpack性能优化之hard-source-wepack-plugin

在webpack4.0的时代，optimization下的splitchunk配置较多，尤其是cacheControls的权重配置，在4.0到5.0之间有一种过渡的使用缓存的方式，打包很快，借助hard-source-webpack-plugin，代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, '../../dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node-modules)/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.(css)$/,
                exclude: /(node-modules)/,
                use: {
                    loader: 'css-loader',
                }
            },
            {
                test: /\.(svg|png|jpg)$/,
                exclude: /ndoe-modules/,
                use: {
                    loader: 'url-loader',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '测试',
            template: 'src/index.html'
        }),
        new HardSourceWebpackPlugin()
    ],
    devServer: {
        contentBase: '../../dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true,
        historyApiFallback: true,
        publicPath: '/'
    }
}

不使用的情况下：

使用后：

性能有90%的提升
tips: webpack5.0会把hard-source-webpack-plugin内置成一个配置。