Question

我们有一个与Webpack捆绑在一起的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的速度，并且可能会使浏览器中的调试工作更加痛苦（我们不使用sourcemap，因为它们对我们没有用过去）。

我正在尝试找出一种动态打开或关闭代码拆分的方法。我的想法是在关闭代码拆分时使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
    })
  );
}

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

1 个答案: