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

我们在用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载。
我们都知道图片的懒加载。当图片不出现在视口时，我们不加载这张图片。那么我们是不是可以实现，路由的懒加载。当我们用到某个路由后，才去加载对应的组件，这样就会更加高效。
实现这样的功能，我们需要<strong>结合Vue的异步组件和webpack的code splitting feature。</strong>

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

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

vue init webpack my-project
cd my-project
npm install

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

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

 <template>
  <div>
    <h1>vue-router懒加载</h1>
    <h2>new doc</h2>
  </div>
</template>
<script>
 export default { }
</script>
<style>
    h1 {
        color: red;
    }
</style>

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

<template>
  <div id="app">
    ![](./assets/logo.png)
    <router-link to="/">Go to hello</router-link>
    <router-link to="/new">Go to new</router-link>
    <router-view></router-view>
  </div>
</template>

在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文件

<script>
  //增加了axios模块的引用
  import axios from 'axios'
  console.log(typeof axios, 11)
  export default {
      name: 'hello',
      data() {
          return {
              msg: 'Welcome to Your Vue.js App'
          }  
      }
  }
</script>

打包后，打开文件

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

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

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