webpack打包后的效果_如何解决webpack打包后，dist文件过大的问题

我们在用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载。

我们都知道图片的懒加载。当图片不出现在视口时，我们不加载这张图片。那么我们是不是可以实现，路由的懒加载。当我们用到某个路由后，才去加载对应的组件，这样就会更加高效。

实现这样的功能，我们需要结合Vue的异步组件和webpack的code splitting feature。

下面开始研究路由的懒加载如何实现，以及它的效果。

首先，我们创建一个webpack模板的项目

vue init webpack my-project

cd my-project

npm install

我们添加路由，看下默认情况下，单页应用如何加载js。

我们先在src/components/创建一个文件New.vue

vue-router懒加载

new doc

export default { }

h1 {

color: red;

}

在App.vue 文件添加两个链接


Go to hello

Go to new

在src/router/index.js 文件中添加路由

import Vue from 'vue'

import Router from 'vue-router'

import Hello from 'components/Hello'

import New from 'components/New'

Vue.use(Router)

export default new Router({

routes: [{

path: '/',

name: 'Hello',

component: Hello

}, {

path: '/new',

name: 'New',

component: New

}]

})

现在我们打包文件

npm run build

打包完后，打开页面(如何不能打开，请自行解决。我配置了nginx，所以可以直接打开)

http://localhost/mall/dist/index.htm#/

我们看下，打开网页后，加载了哪些资源。

1.png

现在，我们切换路由

http://localhost/mall/dist/index.htm#/new

我们发现，没有新的资源加载。

因为一次性加载了所有js。如果你的应用很大，那么这个时候应用打开会很慢。

用路由懒加载，看看效果如何

修改src/router/index.js 文件

import Vue from 'vue'

import Router from 'vue-router'

// import Hello from 'components/Hello'

// import New from 'components/New'

Vue.use(Router)

// 把路由对应的组件定义成异步组件

const Hello = resolve => {

require.ensure(['components/Hello.vue'], () => {

resolve(require('components/Hello.vue'))

})

}

const New = resolve => {

require.ensure(['components/New.vue'], () => {

resolve(require('components/New.vue'))

})

}

export default new Router({

routes: [{

path: '/',

name: 'Hello',

component: Hello

}, {

path: '/new',

name: 'New',

component: New

}]

})

打包成功后，再打开页面

http://localhost/mall/dist/index.htm#/

看下此时加载的资源

2.png

对比上一次，我发现此时加载的资源多了一个js文件。而这个js文件的内容包含了Hello.vue文件的所有内容。

下面我们切换路由

http://localhost/mall/dist/index.htm#/new

3.png

发现新加载了一个js文件。打开这个js,发现其中包含了，New.vue文件的所有内容。

现在，我们实现了按需加载组件，而不是一次性将所有js加载完。不必担心一次性加载完，导致页面迟迟打不开的情况。

修改New.vue文件

//增加了axios模块的引用

import axios from 'axios'

console.log(typeof axios, 11)

export default {

name: 'hello',

data() {

return {

msg: 'Welcome to Your Vue.js App'

}

}

}

打包后，打开文件

http://localhost/mall/dist/index.htm#/new

你会发现用来异步加载New组件的js增大了很多，这是因为其中包含了axios的代码。

好了，路由懒加载的实现就这么简单。更多内容请看官方文档