Почему веб-пакет игнорирует чанк в производственном режиме? - PullRequest
Новая
       6

Почему веб-пакет игнорирует чанк в производственном режиме?

0 голосов
/ 16 января 2019

У меня несколько точек входа, которые используют один и тот же код Что мне нужно сделать, это извлечь этот код в один файл, используя splitCode в веб-пакете 4. Это прекрасно работает в режиме development, но не в production.

Файл конфигурации: 

var path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    mode: "development",
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {

                    loader: 'babel-loader',
                }
            },
            {
                test: /\.(sass|scss|css)$/,
                use: [
                    "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ],
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'js/[name]-[chunkhash].js',
        chunkFilename: 'js/[name]-[chunkhash].js',
        publicPath: '/'
    },
    externals: {
        jquery: "jQuery"
    },
    optimization: {
        runtimeChunk: "single",
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all",
                    priority: 1
                },
                utilities: {
                    test: /\.s?js$/,
                    minChunks: 2,
                    name: "utilities",
                    chunks: "all",
                    priority: 0
                }
            }
        }
    },
    context: path.join(__dirname, 'resources/assets'),
    entry: {
        a: './js/a.js',
        b: './js/b.js'
    },
    plugins: [
        new CleanWebpackPlugin(['public/js/*.*', 'public/css/*.*'], {} ),

        new MiniCssExtractPlugin({
            filename: "css/[name]-[contenthash].css"
        }),

        new WebpackMd5Hash(),

        new ManifestPlugin({
            fileName: 'manifest.json'
        }),
    ]
};

В режиме разработки Webpack создает две точки входа, одну runtime.js, vendor.js и utilities.js, что нормально.

Когда я меняю режим с development на production, веб-пакет игнорирует utilities cacheGroups и добавляет общую кодовую базу в две точки входа.

Что мне не хватает?

Версия Webpack: 4.28.4 Версия узла: 8.15

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Кажется, что установка enforce на true делает работу (но я не совсем уверен, почему).

Это должно быть так: 

utilities: {
    test: /\.s?js$/,
    minChunks: 2,
    name: "utilities",
    chunks: "all",
    priority: 0,
    enforce: true
}

Отныне utilities.js создается не только в режиме разработки, но и в производстве.

0 голосов
/ 17 января 2019

Указание minChunks: 2 означает, что он будет создавать расщепленный пакет только в том случае, если заданный общий импорт указан как минимум в 2 модулях. Возможно, вы захотите проверить, но сбросив его до 1.

Здесь перечислены несколько дополнительных правил по умолчанию: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693#defaults, но в основном, если общая кодовая база не превышает 30 КБ (до min + gz), она не будет выделена. Вы можете принудительно изменить его, обновив ключ minSize, указанный в списке в конфигурации оптимизации по умолчанию .

.
...