背景
在大型应用中，前端路由一般是比较复杂的。当我们使用一个包含多个页面的单页应用时，为了提高应用的性能，我们需要考虑如何优化加载次数和资源大小。其中，路由懒加载就是一种解决方案。
路由懒加载可以将应用中的组件按需加载，从而减小初始加载时间和资源大小。Vue2中，vue-router提供了非常便利的路由懒加载功能，本文将详细介绍它的实现方法。
实现
在Vue2中，我们可以通过webpack提供的require.ensure方法来实现路由懒加载。具体步骤如下：
在webpack配置文件中添加
babel-plugin-syntax-dynamic-import插件。{ "plugins": ["syntax-dynamic-import"] }在路由配置文件中，将要懒加载的组件使用
import()函数进行引入，并且使用component: resolve => require.ensure([], () => resolve(require('@/components/xxx.vue')), 'group-name')语法定义该组件的懒加载方式。其中，group-name是该组件所属的组，用于将组件分组打包成独立的文件。-- -------------------- ---- ------- ----- ------ - --- -------- ------- - - ----- -------- ----- ------- ---------- ------- -- ------------------ -- -- ------------------------------------- ------- -- - ----- --------- ----- -------- ---------- ------- -- ------------------ -- -- -------------------------------------- -------- - - ---在webpack配置文件中，使用
CommonsChunkPlugin插件将组件分组打包成独立的文件。-- -------------------- ---- ------- ----- ------- - ------------------- -------------- - - -------- - --- ------------------------------------- ----- --------- ---------- -------- -------- - ------ -------------- -- ---------------------------------------- - --- --- ------------------------------------- ----- ---------- -- - --在应用中使用路由时，会根据需要动态加载对应的组件。例如：
-- -------------------- ---- ------- ---------- ----- ------------ ----------------------------- ------------ ------------------------------- --------------------------- ------ ----------- -------- ------ ------- - ----- ----- -- ---------
上述步骤中，第2步是实现懒加载最重要的一步，也是我们需要深入学习的部分。在这个例子中，我们使用require.ensure方法定义了组件的加载方式。该方法接受三个参数：
- 依赖数组（可以为空数组）：表示该组件所依赖的其他模块。
- 回调函数：该函数会在需要加载组件时被调用，返回该组件的定义。
- 组名：表示该组件所属的组，用于将组件分组打包成独立的文件。
注意到回调函数中使用了resolve函数来获取组件的定义。这是因为webpack在打包过程中会将所有的代码通过Babel转换成ES5语法，而ES5并不支持动态导入语法。resolve函数就是用来实现动态导入的一种hack方法，它会在运行时根据需要动态加载组件。
指导意义
路由懒加载是一种极具指导意义的技术。它可以帮助我们更好地理解前端应用的性能和优化策略，并为我们的应用提供更快、更可
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1437