Question

componentWillMount中的'require'是反模式吗？我正在尝试根据当前用户区域动态加载区域设置。

componentWillMount(){
 if (localStorage.getItem('locale') === 'da') {
  require('moment/locale/da')
  moment.locale('da')
 }
}

谢谢！

Answer 1

根据捆绑您正在使用的代码的工具，结果可能会有所不同。如果您使用Webpack，它将就地解析“require”和“import”，而不是跳过类方法或任何东西。这意味着你不会从中受益。束尺寸不是最佳的，但你可能会增加脚射击的机会。

但是，在Webpack 3中，Webpack中有一个名为延迟加载的功能，允许您在运行时需要一个模块。 Webpack将负责在用户浏览器中的运行时放置所有必需的JS代码，以从服务器请求模块并执行它（想想创建一个“脚本”元素并将其附加到document）。

有a note on lazy loading in official Webpack documentation指出了跨不同库实现此功能的潜在差异。有了这个，代码看起来像

async componentDidMount() { // <- note that componentWillMount isn't the best place to lazy-load a remote module, see @TryingToImprove's comment
  const da = await import('moment/locale/da'); // <- Webpack will add its magic here
  moment.locale(da);
}

另外，请阅读dynamic imports。

所以，回答你的问题

在componentWillMount中，'require'是反模式吗？

我担心它仍然是在2018年初，至少以你描述的方式，除非特别注意它。

ESLint实际上有一个规则，global-require，当“import”或“require”语句位于除全局范围之外的任何位置时，它会自动挥动标志。

Answer 2

如果您在运行时需要模块，则在捆绑时不会包含它们，并且它将是未定义的。

在componentWillMount中，'require'是反模式吗？

2 个答案: