javascript - 使用 Webpack 4 减少和优化具有两个入口点的 bundle

Question

我有两个入口点并使用 Webpack 4，但是生产构建大约需要 3-5 分钟，并为两个入口点创建两个大型 vendor 输出 js 文件。看起来我有:

对于一个条目:

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

第二个:

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

如何优化？您有什么建议和解决方法或技巧吗？当我启动 build 脚本时，我为此入口点运行两个构建。

package.json:

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

我的 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'}},
}

拳头入口点配置:

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,
        }),
    ],
})

第二个入口点:

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: '/',
    },
})

我有主项目，我将所有 vendor 捆绑在 prod.js 中，将服务器页面捆绑在 identetyServer.js 中，每个条目都有类似的 vendor (react、redux 和所有这些东西)。对我来说，这两个条目的 vendor bundle 看起来很相似。

Answer 1

有很多选项可以加速 webpack，但有一个应该首先考虑:

如果您打算使用 extract-text-webpack-plugin 将其从 bundle 中“删除”，请从 webpack 中删除 scss/postcc 处理。如果您要在 html 中使用 link 引用它，我不知道在 webpack 中处理 css 有什么好的理由。

或者，您可以使用“增量”样式的 webpack 构建过程执行相同的操作。但恕我直言，“退一步”是最简单的方法。