Webpack-4 MiniCssExtractPlugin splitChunks

Я пытаюсь заставить оптимизацию splitChunks Webpack-4 сделать это:

  1. Поместите весь JS и CSS не в какую-либо точку входа, а используйте более одного раза в общие файлы (CSS и JS).
  2. Объедините весь CSS, созданный MiniCssExtractPlugin из компонентов Vue, в один общий файл CSS.

У меня это работает (см. Ниже), но эффект второго правила «extractStuff» заключается в том, что весь код точки входа также помещается в общий блок, что я и пытаюсь предотвратить с помощью этого «теста». Файлы «точки входа» - это просто заглушки веб-пакета, и все находится в общем файле, даже если он используется только один раз. Это работает, но не элегантно.

Кто-нибудь знает, как исключить точки входа из этого второго правила, или есть лучший способ сделать это в целом?

Кто-нибудь знает, где находится определение этих объектов "модуль, фрагменты", возможно, я смогу как-нибудь улучшить этот тест.

splitChunks: {

    cacheGroups: {     // Idea from github.com/webpack/webpack/issues/7230
        mainJS: {
            test: /\.js$/,
            name: "commons",
            chunks: "all",
            minChunks: 2,   // Makes it leave entry point JS alone.
            minSize: 0,
            priority: 20,
            enforce: true
        },
        extractedStuff: {
            test: (module, chunks) => module.depth > 0, 
            name: "commons", // Append to same file as previous rule.
            chunks: "all",
            minChunks: 1,   // ..or single-use CSS is not bundled.
            minSize: 0,
            priority: 10,
            enforce: true
        }
}

},


webpack vue.js mini-css-extract-plugin webpack-4 webpack-splitchunks
person philw    schedule 13.06.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я возился с этим, но вот как я решил свою проблему ...

Проблема с вышеизложенным состоит в том, что запись extractStuff нарушает объединение, потому что для нее обязательно установлено значение minChunks 1. Эта запись должна быть удалена: я не могу объединить извлеченный CSS таким образом.

Я экспериментировал с созданием плагина для комбинирования CSS, но проблема в том, что он не дедуплицировал его: таким образом вы получаете несколько копий CSS.

Вместо этого, похоже, это работает отлично, исходя из совета Mini-Css-Extract-Plugin.

      cacheGroups: {
            mainJS: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
                minSize: 0,
                priority: 20,
                enforce: true
            },
            extractedCSS: {
                test: (module, chunks) => module.constructor.name === 'CssModule',
                name: "commons",
                chunks: "all",
                enforce: true
            }
        }
person philw    schedule 14.06.2018
comment
Спасибо за ваш комментарий. Очень полезно. Ваше здоровье. stackoverflow.com/a/40932984/943435 - person Roberto; 07.12.2018