Webpack DefinePlugin медленность. Любая альтернатива?

Question

Мы используем Webpack DefinePlugin для создания выходного пакета для разных режимов рендеринга. Так, например, наш WebPack конфигурации возвратит

[{ 
    entry: { 
     mode1: "./input.es6", 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: "[name]-bundle.js", 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
     __RENDER_MODE__: 'mode1', 
     })) 
    ] 
    },{ 
    entry: { 
     mode2: "./input.es6", 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: "[name]-bundle.js", 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
     __RENDER_MODE__: 'mode2', 
     })) 
    ] 
    }] 

В коде мы будем делать

if (__RENDER_MODE__ === 'mode1') { 
    require('jquery-ui') 
} 

if (__RENDER_MODE__ === 'mode2') { 
    require('other-lib') 
} 

Это позволяет генерировать пучки, которые более оптимизированы для каждого режима визуализации. Однако по мере увеличения нашего режима рендеринга мы запускаем несколько компиляций webpack, что резко замедляет процесс компиляции. У меня есть некоторые мысли в решении этой проблемы и хочу услышать больше входов:

1. Есть ли способ использовать 1 одноместный WebPack компиляции и не определяет замену плагина после компиляции завершена? Поэтому вместо того, чтобы DefinePlugin заменял переменные во время компиляции, мы только компилируем один раз и затем выполняем замену впоследствии.

2. Или, есть ли способ сделать за ввод DefinePlugin? Каждая запись будет иметь отдельную конфигурацию DefinePlugin.

Answer 1

Вы должны выполнить то, что WebPack делает с DefinePlugin в процессе компиляции по той простой причине, что DefinePlugin это может повлиять на то, что на самом деле в комплекте.

Если у вас есть следующий в коде:

if (__RENDER_MODE__ === 'mode1') { 
    require('someLibrary').render(); 
} 

WebPack будет достаточно умен, чтобы увидеть IF всегда falsey, когда условие не выполняется, и someLibrary будет добавлен только к вашей пачке если он может фактически использоваться. Использование DefinePlugin до шага минимизации также важно, так как мертвый код (тот же, что и в примере) будет удален с помощью минификатора.

Итак, нет, нет способа сделать то, что DefinePlugin делает на более позднем этапе, чтобы избежать компиляции обоих пакетов отдельно.

По вашему второму вопросу нет, отдельный DefinePlugin для каждой записи невозможно, по той простой причине, что обе записи могут иметь общие модули, что приведет к конфликту. Единственный способ сделать это - это две отдельные сборки, которые вы уже делаете.