webpack 懒加载方案

发表于

懒加载

官网解释：懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

示例

我们增加一个交互，当用户点击按钮的时候用 console 打印一些文字。但是会等到第一次交互的时候再加载那个代码块（print.js）

src/print.js

1
2
3
4
5
console.log('The print.js module has loaded! See the network tab in dev tools...');
export default () => {
  console.log('Button Clicked: Here\'s "some text"!');
}

src/main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const commonCss = require('./css/common.css');
const greeter = require('./Greeter.js');
document.querySelector("#root").style.color = 'red';
document.querySelector("#root").appendChild(greeter());
function component() {
  var element = document.createElement('div');
  var button = document.createElement('button');
  button.innerHTML = 'Click me and look at the console!';
  //重点，ES6 语法
  button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
    var print = module.default;
    print();
  });
  element.appendChild(button);
  return element;
}
document.body.appendChild(component());

尝试运行 npm run build 命令,可以看到 print,js 模块并未加载，点击交互后才加载，达到目的。

以上是 webpack 的写法，对于 vue 框架有配套成熟的方案。

vue 路由懒加载

vue 框架的懒加载方案需要配合 vue-router 来使用。仅需要两步：

结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。

  1. 定义一个能够被 webpack 自动代码分割的异步组件 
1
const Foo = () => import('./Foo.vue')
  1. 在路由配置中什么都不需要改变，只需要像往常一样使用 Foo:
1
2
3
4
5
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

原理解释：

首先，可以将异步组件定义为返回一个 Promise 的工厂函数(该函数返回的Promise应该 resolve 组件本身):

1
const Foo = () => Promise.resolve({ /*  组件定义对象 */ })

第二,在 webpack 2中,我们可以使用动态 import语法来定义代码分块点(split point):

1
import('./Foo.vue') // returns a Promise

结合以上两步就是我们缩略的一句。

对比一下原先不用异步的写法：

1
2
3
4
5
6
7
import check from '@/components/check'
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})