Разделение кода в Webpack из файлов поставщика?

Question

Мы используем несколько библиотек js, которые внутренне импортируют как lodash, так и момент.

Обе они известны тем, что могут очень легко раздувать ваши пакеты, если только вы не умны с импортом.

Мы пытаемся уменьшить наш начальный размер пакета, так как и lodash и момент нужны только на 20% сайта.

-

Я знаю, что в нашей базе кода мыможет делать такие вещи, как

const moment = () => import(/* webpackChunkName "moment" */'moment');

Однако, поскольку библиотеки, которые находятся глубоко внутри node_modules, просто делают:

import moment from 'moment'
import _ from 'lodash'

Есть ли в любом случае с помощью веб-пакета, что мы можем отметить всекак их следует разделить?

Может быть, полезно знать, использовали ли Vue CLI для создания проекта, чтобы наша конфигурация webpack фактически хранилась внутри vue.config.js

Answer 1

У меня была похожая проблема - не в проекте Vue, но, возможно, это немного помогает - на веб-сайте наших компаний, который я полностью переписал.Я сделал следующее:

1. установите concatenateModules на true (https://webpack.js.org/plugins/module-concatenation-plugin/)
2. установите namedModules и namedChunks на true (нам это нужно, потому чтомногие из написанных мной плагинов тоже используют webpack, и я не хотел загружать jQuery и т. д. 10 раз)
3. установите runtimeChunk на 'single' и просто загрузите его один раз перед всеми остальными файлами (!) (это обрабатывает все скомпилированные сценарии webpack)
4. установите usedExports в true, чтобы пропустить экспорт, который использовался до
5. , добавить cacheGroups, как рекомендовал hackape
6. , добавить aплагин типа BundleAnalyzerPlugin, чтобы увидеть, какие файлы действительно раздувают проект
7. добавить TerserPlugin, чтобы минимизировать / скомпрометировать все (будет использоваться по умолчанию в веб-пакете 5)
8. сделать это: const function = require('lib/source/function') вместо const { function } = require('lib') (для этого потребуется только этот маленький скрипт, а не дырочная библиотека)

и если вы хотите использовать плагин манифеста, чтобы лучше использовать имена хэшированных файлов

Вот наш конфиг: https://gist.github.com/muuvmuuv/b97153fcfe462d837ef8e8535f69fc82

Answer 2

webpack splitchunks.cacheGroups - это то, что вам нужно. Проверьте ссылку.

По сути, вы можете выбрать, какой модуль входит в какой блок:

optimization: {
    splitChunks: {
      cacheGroups: {
        lodashAndMoment: {
          test(module, chunks) {
            //...
            // WATCH OUT! WATCH OUT! WATCH OUT!
            // I'm not 100% sure `module.name` actually looks like this
            // It's my IRRESPONSIBLE GUESS just to show the idea.
            return module.name === 'lodash' || module.name === 'moment';
          }
// ...
}