vue路由的按需加载

先看require import import()区别

import命令会被 JavaScript 引擎静态分析，先于模块内的其余模块执行（叫作”链接“更合适）。

import()函数，完成动态加载。异步加载

require是运行时加载模块，只有运行时才知道,同步加载

      在Vue项目中，通常使用vue-cli构建项目后，咱们会在Router文件夹下面的index.js里面引入相关的路由组件,如：

  import Hello from '@/components/Hello'
   import Boy from '@/components/Boy'
   import Girl from '@/components/Girl'
　　这样作的结果就是webpack在npm run build的时候会打包成一个整个的js文件，若是页面一多，会致使这个文件很是大，加载缓慢，为了解决这个问题，须要将他分红多个小文件，并且还要实现异步按需加载，即用到了再加载，而不用一股脑所有加载

1.webpack提供的require.ensure(),这样能够实现按需加载，而且你能够将多个相同类的组件打包成一个文件，只要给他们指定相同的chunkName便可，如示例中的demo将会打包成一个文件。

2.Vue的异步组件技术，这种方法能够实现按需加载，而且一个组件会打包成一个js文件

3.es提案的import（）

首先，能够将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件自己)：

第二，在 Webpack 2 中，咱们可使用动态 import语法来定义代码分块点 (split point)：

（注意：若是您使用的是 Babel，你将须要添加 syntax-dynamic-import 插件，才能使 Babel 能够正确地解析语法。）

结合这二者，这就是如何定义一个可以被 Webpack 自动代码分割的异步组件。

这样作的结果是每一个组件都会打包成一个js文件，有时候咱们想把某个路由下的全部组件都打包在同个异步块 (chunk) 中。只须要使用 命名 chunk，一个特殊的注释语法来提供 chunk name

原文连接：https://blog.csdn.net/juse__we/article/details/84070965