Create React App 学习-7.使用Public文件夹及代码分割

注意：此功能可用于react-scripts@0.5.0或更高版本。

更改HTML

该public文件夹包含HTML文件，因此可以对其进行调整，例如，设置页面标题。在编译过程中，包含有编译过的代码的<script>标签将会被自动添加进来。

在模块系统之外添加assets

我们建议在JavaScript文件中importassets，就像引入样式、图片和字体那样。该机制提供了许多好处：

脚本和样式会缩小并且捆绑在一起，避免额外的网络请求。
缺少文件会导致编译错误而不是404错误
最终文件名包含哈希，因此不用担心浏览器缓存其旧版本。

如果将文件放入public文件夹，则webpack 将不会处理该文件。而是将其原封不动地复制到构建文件夹中。要引用public文件夹中的资源，您需要使用一个名为的环境变量PUBLIC_URL。

在index.html内部，你可以这样写：

<link rel="ico" href="%PUBLIC_URL%/favicon.ico"/>

只有文件public夹中的文件可以通过%PUBLIC_URL%前缀访问。如果您需要使用src或node_modules中的文件，则必须将其复制到此处，以明确指定您打算将此文件作为构建的一部分。

运行npm run build时，Create React App将替换%PUBLIC_URL%为正确的绝对路径，因此即使您使用客户端路由或将其托管在非根URL上，您的项目也可以正常工作。

在JavaScript代码中，您可以使用process.env.PUBLIC_URL来达到类似目的：

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

牢记：

public文件夹下的所有文件都不会进行后处理或缩小
丢失的文件将不会在编译时被指出，将会在您的用户报404错误。
最终文件名不包含哈希，因此每次他们改变时，你需要新增请求参数或重命名它们。

何时使用`public`文件夹

通常我们建议从JavaScript文件中引入css\image\fonts。public文件夹在许多不常见的情况下可用作解决方法：

你需要在build后输出一个具有特定文件名的文件，如manifest.webmanifest。
有成千上万张图像，并且需要动态引用它们
想在bundled代码外包含一个小的script脚本如pace.js
某些库可能与webpack不兼容，您别无选择，只能将其作为<script>标签包含在内。

请注意，如果添加一个<script>声明全局变量的，则应阅读下一节中的主题“ 使用全局变量”，该主题说明了如何引用它们。

代码分割

代码拆分允许您将代码拆分为小块，然后按需加载，而不是在用户使用前下载整个应用程序。

该项目设置支持通过dynamic import()拆分代码。建议版本stage 4，类似函数的import()格式将模块名做为参数并返回一个总是处理模块的命名空间的Promise。

有一些案例：

moduleA.js

const moduleA = "Hello";
export {moduleA};

App.js

import React,{Component} from "react";
class App extends Component{
    constructor(props){
        super(props);
    }
    handleClick = ()=>{
    //代码分割，引入要使用的代码，返回一个promise
        import('./moduleA').then(({modulesA})=>{
            //使用moduleA
        }).catch(err=>{
            //错误处理
        });
    };
    render(){
        return(
        <div>
        <button onClick={this.handleClick}>Load</button>
        </div>
        );
    }
}

这将使它moduleA.js及其所有唯一依赖项成为一个单独的块，仅在用户单击“加载”按钮后才加载。有关创建的块的更多信息，请参见生产构建部分。

如果愿意，也可以将它与async/ await语法一起使用。

使用React Router

如果您使用的是React Router，请查看官方教程

还可以查看React文档中的Code Splitting部分。