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

在用vue.js写单页面应用时，如果按照import直接引用vue的组件，刚开始可能项目页面不多可能察觉不到这样做的用处，当项目中路由有几十个或者更多的组件需要引用，webpack默认将所有的js打包为一个文件：app.[contenthash].js，然后这个文件会越来越庞大，这个文件即使你在访问首页默认页等时候需要被加载，然而这个文件不进行分割的话，可能有好几兆甚至几十兆大多数的项目首页可能没啥交互特别复杂的功能，却要强制加载首页并不会用的其他页的资源，而且首页也是访问量最大的，为了节省资源，为了加快首页访问速度，也需要按需加载才行。

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

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

首先，我们创建一个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。如果你的应用很大，那么这个时候应用打开会很慢。

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

一开始以为配置懒加载会非常麻烦，但尝试了下，发现还是蛮简单的。 

第一步：修改build/webpack.base.conf.js文件 

修改内容：

 output: {
    path: config.build.assetsRoot,
    filename: process.env.NODE_ENV === 'production' ?  '[name].js?[chunkhash]' : '[name].js',
    chunkFilename: 'chunk[id].js?[chunkhash]',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

第二步：修改vue-router的配置 

import UserList from '@/components/userList/UserList';
修改成
const UserList = r => require.ensure([], () => r(require('../components/userList/UserList')), 'load');

• 1
• 2
• 3

import Vue from 'vue'
import Router from 'vue-router'
// import Hello from 'components/Hello'
// import New from 'components/New'
Vue.use(Router)
 // 把路由对应的组件定义成异步组件  ‘group-hello为分组名’
const Hello = r => require.ensure([], () => r(require('components/Hello.vue')),'group-Hello')const New = r => require.ensure([], () => r(require('components/New.vue')),'group-New ')

export default new Router({
    routes: [{
        path: '/',
        name: 'Hello',
        component: Hello
    }, {
        path: '/new',
        name: 'New',
        component: New
    }]
})

就这么简单，完成了懒加载的配置，运行 npm run build 发现多出了相应的js文件。

打包成功后，再打开页面

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的代码。

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

推荐相关文章： https://www.cnblogs.com/zhanyishu/p/6587571.html