从create-react-app开始，构建项目架构

1.生成项目

命令行执行：create-react-app  myapp，生成如下结构：

 

 

 2.安装sass依赖，让你在项目中可以使用scss模块化，index.module.scss：

npm i node-sass sass-loader -D

之后就能用了，rules配置脚手架已经处理了,使用：

/*index.module.scss*/
.test{
    background-color: pink;
    min-height: 100vh;
}

// index.jsx中
import React from 'react';
import styles from './index.module.scss'

function App() {
  return (
    <div className={styles.test}>
    </div>
  );
}

export default App;

3.异步加载组件

npm install --save react-loadable

// 1.引入
import loadable from 'react-loadable';
import Loading from '@/components/Loading';
// import Index from '@/pages/Index';
// import IndexSort from '@/pages/IndexSort';

// 2.改造引入组件的方式
const Index = loadable({
  loader:()=>import('@/pages/Index'),
  loading:Loading,//Loading为加载中展示的组件
});
const IndexSort = loadable({
  loader:()=>import('@/pages/IndexSort'),
  loading:Loading,
});

// 3.直接使用改造之后的组件
　　{
      path: '/',
      exact:true,
      component: Index,
    },
    {
      path: '/index-sort',
      component: IndexSort,
    },

更新中