如何动态地打开/关闭代码拆分

Question

我们有一个ReactJS应用，我们和webpack捆绑在一起。我们使用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实现)，但是如果您有一个开发webpack.config (即webpack.config.dev.js )，您可以添加到插件数组中：

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

这将停止代码分裂，并且只生成一个文件。到目前为止，在我的测试中，react-loadable似乎对此很酷，只是按照正常的方式工作，没有代码分裂。

如果您想要一种动态地打开和关闭这个开关的方法，您可以在启动它时向webpack传递一个命令行参数，然后有条件地添加上面的代码。在你webpack配置文件的底部。

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