如何动态切换代码拆分on/off

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

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

如何动态切换代码拆分on/off

How to dynamically switch code splitting on/off

import

ecmascript-6

reactjs

webpack

code-splitting