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內置成一個配置。