vue、react在webpack中代码分割，性能优化

在使用vue-cli、create-react-app中，webpack构建的打包构建的单页应用会生成一个大文件。这意味着我们的项目首屏加载会需要更长的时间，那么怎么减少首屏的js文件大小呢？就是code-splitting。

一、react篇

1. 封装异步加载AsyncComponent

  import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

1. 该asyncComponent函数采用了一个参数; 一个 function（importComponent），当被调用时将动态导入给定的组件。当我们使用时，这将更有意义asyncComponent。
2. 在componentDidMount，我们只需调用importComponent传入的函数。并将动态加载的组件保存在状态中。
3. 最后，如果组件已完成加载，我们会有条件地渲染组件。如果不是，我们只是渲染null。但是null，您可以渲染加载微调器而不是渲染。当您的应用程序的一部分仍在加载时，这会给用户一些反馈。

import AsyncComponent from '../components/AsyncComponent'
const Home = AsyncComponent(() => import('../page/home'))
const routes = [
  {
    name: '首页',
    isTab: true,
    link: '/home',
    component: Home
  }
]
export default routes

import React, { Component, Fragment } from 'react';
import  { Router, Route, Redirect} from 'react-router-dom'
import routes from '../../router'
function RenderRouters({routes}) {
  return routes.map((item) =>{
    return(
      <Route
        path={item.link}
        key={item.name}
        render={() => (<item.component />)} />
    )
  })
}
class App extends Component {
  render() {
    return (
      <div className="App">
        {
            <Router history={history}>
              <Fragment>
                <Route exact path="/" render={() => (
                  <Redirect to="/home" />
                )} />
                <RenderRouters routes={routes}></RenderRouters>
              </Fragment>
            </Router>
        }
      </div>
    );
  }
}
export default App

这样一来，打包之后，会生成多个js文件。进入一个新的路由会加载对应的js文件，大大缩小了首屏js文件大小

二、vue篇

1.路由按需加载

import Vue from 'vue'
import VueRouter from 'vue-router'
const Home= () => import('pages/Home')
Vue.use(VueRouter)
const routes = [{
    path: '/',
    redirect: '/home',
    component: Home
}]
const router = new VueRouter({
  routes
})
export default router

2.组件按需加载

// import op from '@/components/op'
const op= () => import('@/components/op')