Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



使用Webpack的代码拆分在Vue中进行延迟加载

2018-01-09 » Javascript / Tutorial , Vuejs

懒加载 3 种场景

1. Components;

2. Router;

3. Vuex modules.

懒加载通用原理

Webpack 2 后,支持了动态导入: dynamic import。基于该特性,在 Vue 应用程序中,我们便可以使用这种方式,在上述的 3 种场景中,实现它们的懒加载方式。

Lazy load in Vue components

想要异步加载一个 Vue component,是非常容易的。在注册组件时,使用 import 函数即可。

Lazy load in Vue Router

Vue router 本身便支持 lazy-loading ,官方文档也有相应说明:Lazy-loading * vue-router 

如果你还在使用旧版本的 vue-router,也可以使用 require() 懒加载一个 vue router,下面是一个完整的示例:

Lazy load a Vuex module

Vuex 有一个 registerModule 方法,允许我们动态创建 Vuex 模块。 

配置 chunkFilename

使用 import 函数对 Components、Router、Vuex modules 进行延迟加载后,在 webpack.config.js 中配置 chunkFilename!

再次打包应用程序,你会发现旧的 build.js 文件体积缩小,并且 webpack 将各种依赖及懒加载的单独打包成多个 *.chunk.js

由于我们在 Vue Router 中做了延迟加载,现在,当访问路由时,只会加载路由中所依赖的组件,而不是一次性将全部脚本加载完。

例如,当我们访问根路由时,根路由依赖 3 个组件,build.js 会根据依赖关系,加载相应的 3 个 chunk.js。

当路由切换时,不会重复加载已加载过的 chunk.js,而是只加载未加载过的 chunk.js。

 

不管是首屏渲染速度,还是整个项目体积的变化,都有了整体的优化!

展开选填信息