Как динамически включать / выключать разбиение кода

Question

У нас есть приложение ReactJS, которое мы поставляем вместе с веб-пакетом.Мы используем React-Loadable, чтобы помочь нам с разбиением кода, и сейчас модуль маршрутизатора нашего приложения выглядит как

import Loadable from 'react-loadable'

const LoadableComponent = (url, component)=>Loadable({
    loader:()=> import(`${url}`),
    loading: ()=><div></div>,
    render(loaded, props){
        let LoadedComponent = loaded[component]
        return <LoadedComponent {...props}/>
    }
})

const Landing = LoadableComponent('./components/LandingPage', 'Landing')
// ... all the other imports have this form ^

При этом, как говорится, во время разработки разбиение кода замедляется webpack --watch и может привести к отладке вбраузер будет немного сложнее (мы не используем исходные карты, потому что они не очень хорошо работали для нас в прошлом).

Я пытаюсь найти способ динамического переключения разделения кодавкл или выкл.Моя идея - заставить LoadableComponent вести себя как обычный импорт, когда разделение кода отключено.Тем не менее, и import, и react-loadable кажутся слишком загадочными, чтобы это было просто, я не смог найти способ сделать это в javascript.

Answer 1

Что вы можете попробовать, и это будет зависеть от вашей реализации веб-пакета, но если у вас есть разработка webpack.config, т.е. webpack.config.dev.js, вы можете добавить в массив плагинов:

new webpack.optimize.LimitChunkCountPlugin({
  maxChunks: 1
})

Это остановит кодрасщепление и строит только один файл.В моих тестах до сих пор react-loadable, кажется, с этим справлялся и просто работал как обычно, без разделения кода.

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

if (yourArgHere) {
  module.exports.plugins.push(
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  );
}