react3按需打包在vue中，使用组件之前，建议全部安装，这样使用更方便。在react中，为了优化，建议我们使用什

按需打包

在vue中，使用组件之前，建议全部安装，这样使用更方便。在react中，为了优化，建议我们使用什么组件，引入什么组件。所以react提供了一个按需打包的技术，与按需加载类似，都是为了性能优化。 按需加载

在浏览器端，需要什么资源，加载什么资源（如：require.js, sea.js）. 按需打包(react提供了一个按需打包插件：babel-plugin-import插件)

在编译阶段，需要什么资源，打包什么资源
在babel的配置options.plugins中配置该插件。是一个数组，每一个成员代表一个插件。

成员可以是字符串，直接引入
成员还可以是数组：
第一个成员代表插件名称，
第二个成员代表插件配置
libraryName 按需打包的模块
style 按需打包的样式文件类型
注意：一旦使用按需打包的技术，样式就不需要手动引入了，会自动打包进来。 webpack.config.js

// 接口
module.exports = {
    // 模式
    mode: 'development',
    // 解决问题
    resolve: {
        // 默认拓展名
        extensions: ['.jsx', '.js']
    },
    // 入口
    entry: './modules/main.jsx',
    // 发布
    output: {
        // 发布位置
        filename: './main.js'
    },
    // 模块
    module: {
        // 加载机
        rules: [
            // jsx
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                // 配置
                options: {
                    // 编译器
                    presets: ['@babel/preset-env', '@babel/react'],
                    // 功能
                    plugins: [
                        ['import', {
                            libraryName: 'antd-mobile',
                            // 按需打包css
                            style: 'css'
                        }]
                    ]
                }
            },
            // css
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
                // use
            },
            // less
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            },
            // scss
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    }
}

脚手架安装

全局安装指令 npm i -g creact-react-app
开始创建项目 create-react-app 项目名称

create-react-app创建的项目也是通过yarn来管理和维护的，安装模块用yarn安装。例如：yarn add react-router react-router-dom redux react-redux yarn add指令功能与npm install指令是一样的。

目录部署

node_modules 依赖模块

public 静态目录

favicon.ico：logo

index.html：模板入口文件

manifest.json：离线缓存配置

src 开发目录

App.css：应用程序样式

App.js：应用程序脚本

App.test.js：应用程序单元测试

index.css：全局样式

logo.svg：eact的logo

registreServiceWorker.js：web workers

.gitignore git 配置

package.json npm 包配置

README.md 介绍文件

yarn.lock yarn锁文件

指令

create-react-app创建的项目提供了一些指令：

start 启动项目，默认端口号是3000

build 发布项目，默认发布到build目录下

test 单元测试

eject 输入webpack配置

任务：

将静态资源发布到外面的dist目录下

将模板资源发布到外面的views目录下

这些指令既可以使用yarn来启动，也可以使用npm来启动。

PWA 应用

PWA应用是一个渐进式的web应用，介于源生app与网站页面之间的一个应用。其中

manifest.json就是离线缓存的文件
registreServiceWorker.js也是为pwa应用提供的web worker文件。在浏览器中，点击“创建快捷方式”就可以在桌面上，创建一个离线应用。使用方式打开chrome 浏览器打开开发的应用程序界面点击三个点-->更多工具-->创建快捷方式

混合开发

react要实现多端适配，因此为不同的端提供了不同的渲染器。

在不同的端渲染同一个应用程序，这个技术叫混合开发（跨平台开发）

常见的混合开发有三类：

1 类小程序开发。如：微信小程序

2 基于hybird，cordova等技术实现的开发。例如：angular

3 基于reactnative，flutter等技术的开发。

将前端语言编译成各自端中的语言。

GitHub地址：github.com/reactnative

中文网站：reactnative.cn/docs/gettin…