当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
webpack打包会将所有资源文件合并压缩成一个文件,导致最终的文件非常大,甚至超过几M,以致页面首次加载会比较慢,如下图:
其中红色标出的是在浏览器中加载的js文件,gzip压缩前已经达到500多KB了。
再看看路由按需加载后:
文件被拆成一个个小的文件,即webpack的文件分割。这里是以页面为单位进行切割。具体实现如下:
通常情况下,我们引入vue文件的方式是
import RankList from ‘@/components/RankList’
然后在router里面配置
{
path: '/rank-