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

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).

在官方Webpack文档中有关于延迟加载的注释,指出了跨不同库实现此功能的潜在差异.有了这个,代码看起来就像

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);
}

此外,阅读更多的动态进口.

所以,回答你的问题

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

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

ESLint实际上有一个规则,global-require,当"import"或"require"语句位于除全局范围之外的任何地方时自动挥动标志.