优化多页面的页面加载

Question

我有一个多页面的网站。我创建了一个包含所有文本/para/image的组件。我已经将这个组件引用到了所有的多个页面。我使用了一个类名来通过css向各个页面隐藏/显示内容。问题是页面加载很慢。因为所有的内容都是用css隐藏的，所以它们仍然在加载，这使得我的网站变慢了。这方面的任何帮助都是非常感谢的。谢谢

Answer 1

有很多你可以检查的东西。

1. 检查互联网连接，我希望你有良好的互联网连接来加载页面。
2. 正如你所说的有多个页面只有一个组件，检查你是否可以将它们移动到css中。如果这些组件很轻，我不确定你是如何隐藏这些组件的使用css属性display:none。

您可以使用类似以下内容：

<style type="text/css">
  .hidden { display:none; }
</style>

render: function() {
return (
  <div className={this.props.shouldHide ? 'hidden' : ''}>
    This will be hidden if you set <tt>props.shouldHide</tt> 
    to something truthy.
  </div>
 );
}
// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>

source