时间戳

首页 > 解决方案 > 如何动态打开/关闭代码拆分

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

问题描述

我们有一个与 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，并且会使浏览器中的调试变得更加痛苦（我们不使用源映射，因为它们过去对我们来说效果不佳）。

我试图找出一种方法来动态地打开或关闭代码拆分。我的想法是在代码拆分关闭时使LoadableComponent行为像正常导入一样。然而，这两者import似乎react-loadable都太神秘了，以至于无法直截了当，我一直无法找到在 javascript 中做到这一点的方法。

标签： reactjswebpackecmascript-6importcode-splitting

解决方案

你可以尝试什么，这将取决于你的 webpack 实现，但如果你有一个开发 webpack.config 即webpack.config.dev.js你可以添加到 plugins 数组中：

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

这将停止代码拆分并且只构建一个文件。到目前为止，在我的测试react-loadable中，这似乎很酷，并且可以正常工作而无需进行代码拆分。

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

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

推荐阅读