使用Webpack 4通过两个入口点减少和优化捆绑包

Question

I have two entry points and use Webpack 4, but the build for production takes about 3-5 minutes and create for both entry points two large vendor output js files. Looks like I have:

For one entry:

main.4b8e36a69d37fde00916.js   1.15 MiB       0  [emitted]  [big]  main
vendors~main.ebc7e19767bc133dd354.js   5.36 MiB       1  [emitted]  [big]  vendors~main

For second:

../identityServerModel.cc17842eb2ee86c9a5a7.js   17.2 KiB       0  [emitted]         identitySer
../vendors~main.6adcd3c3d6680968397f.js   4.24 MiB       2  [emitted]  [big]  vendors~main

How to optimize it? Do you have any suggestions and workaround or tricks? When I start my build script I run two builds for this entry points.

package.json:

...
"build": "webpack --colors --config webpack/prod.js && webpack --config webpack/identityServer.js &&   cpx \"dist/**/*\" ../SomeFolder/Ui --clean",
...

My webpack:

common.js:

const extractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

const path = require('path')
// initialize version.js
require('child_process').exec('node ' + path.resolve('./../scripts/setAppVersion.js'), {cwd: '../'}, function (err, stdout, stderr) {
    console.log(err)
})

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: './src/main.js',
    plugins: [
        // TODO remove after deleting *.scss files across app
        new extractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true,
        }),
        new CleanWebpackPlugin(['dist'], {
            root: path.join(__dirname, '..'),
        }),
    ],
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'eslint-loader?{fix:true}',
                exclude: /node_modules/,
                enforce: 'pre',
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'file-loader?name=[name].[ext]',
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
            // TODO remove extractTextPlugin after delete all .scss in react-components
            {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!sass-loader',
                }),
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=fonts/[name].[ext]',
            },
            {
                test: /\.(png|mp4)$/,
                use: 'file-loader',
            },
        ],
    },
    performance: {hints: false},
    optimization: {splitChunks: {chunks: 'all'}},
}

fist entry point config:

prod.js:

const merge = require('webpack-merge')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const common = require('./common.js')

module.exports = merge(common, {
    mode: 'production',
    devtool: false,
    stats: 'normal',
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.ejs',
            hash: true,
        }),
    ],
})

second entry point:

identityServer.js:

const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

const common = require('./common.js')
const path = require('path')

const templates = {
    index: {excludeChunks: ['identityServerModel']},
    logout: {
        excludeChunks: ['main'],
        chunks: ['identityServerModel'],
        inject: 'head',
    },
    error: {
        excludeChunks: ['main'],
        chunks: ['identityServerModel'],
    },
}

const entryHtmlPlugins = Object.keys(templates).map(template => new HtmlWebpackPlugin({
    template: `./src/components/loginPage/${template}.ejs`,
    filename: `${template}.html`,
    hash: true,
    ...templates[template],
}))

const commonFiltered = {
    ...common,
}

commonFiltered.plugins = commonFiltered.plugins.filter(plugin => !(plugin instanceof CleanWebpackPlugin))

module.exports = merge(commonFiltered, {
    mode: 'production',
    devtool: false,
    stats: 'normal',
    entry: {
        identityServerModel: './src/components/loginPage/identityServerModel.js',
        main: './src/components/loginPage/login.js',
    },
    plugins: entryHtmlPlugins,
    output: {
        filename: '../[name].[chunkhash].js',
        path: path.resolve(__dirname, '../dist/login'),
        publicPath: '/',
    },
})

I have main project and I bundle all vendros in prod.js and server page in identetyServer.js each of this entries has similar vendors (react, redux and all this stuff). For me vendor bundles looks similar for both entries.

Answer 1

There are many options to speed up webpack, but there is one that should be considered first:

Remove scss/postcc processing from webpack if you are going to "drop it out" from bundle with extract-text-webpack-plugin . I do not know any good reason to process css in webpack if you are going to reference it in the html with link .

Alternatively you can do something the same with "incremental" style webpack build processes. But IMHO one "step back" is the most simple way.