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

【问题标题】：How to dynamically switch code splitting on/off如何动态打开/关闭代码拆分
【发布时间】：2018-10-25 14:06:38
【问题描述】：

我们有一个与 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 中找到一种方法。

【问题讨论】：

如果可以升级到v16.6.0，可以试试React.lazy（本周刚发布）。我不确定它是否能解决性能问题，但尝试一下不会有坏处。

标签： reactjs webpack ecmascript-6 import code-splitting

【解决方案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
    })
  );
}

【讨论】：