针对首屏加载不太需要的一些资源，我们可以通过懒加载的方式去实现，通过 webpack 提供的 import() 语法 动态导入 功能进行代码分离，通过按需加载，大大提升网页加载速度。

    原理：
    通过jsonp的方式，动态生成script标签执行后端传入的js代码。
    例：

    1. import './main.css';
    2. import './sass.scss'
    3. import logo from '../public/avatar.png'
    5. import '@/fonts/iconfont.css'
    7. const a = 'Hello ITEM'
    8. console.log(a)
    10. const img = new Image()
    11. img.src = logo
    13. document.getElementById('imgBox').appendChild(img)
    15. // 按需加载
    16. img.addEventListener('click', () => {
    17.   import('./desc').then(({ default: element }) => {
    18.     console.log(element)
    19.     document.body.appendChild(element)
    20.   })
    21. })
    1. export default function App () {
    2.     return (
    3.         <div>
    4.             hello react 111
    5.             <Hello />
    6.             <button onClick={() => import('lodash')}>加载lodash</button>
    7.         </div>
    8.     )
    9. }

    路由中

    1.   {
    2.     name: 'Verify',
    3.     path: '/verify',
    4.     component: lazy(() => import('@/pages/verify/index')),
    5.     exact: true,
    6.     meta: {
    7.       title: '实名认证',
    8.       requireAuth: true // 需要登录
    9.     }
    10.   },

    参考资料：
    1.原理：https://segmentfault.com/a/1190000020233387