vue-webpack 打包过大的问题

 

使用 vue 的 webpack 模版开发项目时，我们习惯使用 npm install 安装各种组件和依赖到本地，但引入的组件越来越多，打包时可能会导致 vendor.js 过大的问题，导致加载很慢。

首先我们了解一下vue在run build之后，dist里面的文件有哪些：

首先要理解为什么会有以下三个文件：

webpack应该是会在最后一个CommonsChunkPlugin产出的chunk注入webpackJsonp的定义,以及异步加载相关的定义,而就是这个会涉及到所有entry及chunk的md5,所以会"经常变动"，同时vue-cli默认的vendor是打包node_module下的所有依赖，会很大，在生产环境，过大的文件要尽量利用缓存来加快载入速度，但“经常变动”不利于缓存，所以为了将entry(这里可认为是app.js)的变动隔离在vendor之外，vue-cli在vendor之后多做了一个manifest的chunk,这样entry只要不引入新的node_modules里的包就不会影响到vendor了.ps:所以其实跟编译次数没什么关系,所有文件每次打包都会再编译一次的,重点是大文件，缓存，变动代码的拆分

app.js:基本就是你实际编写的那个app.vue(.vue或.js?),没这个页面跑不起来

vendor.js::vue-cli全家桶默认配置里面这个chunk就是将所有从node_modules/里require(import)的依赖都打包到这里，所以这个就是所有node_modules/下的被require(import)的js文件

manifest.js: 最后一个chunk，被注入了webpackJsonp的定义及异步加载相关的定义(webpack调用CommonsChunkPlugin处理后模块管理的核心,因为是核心,所以要第一个进行加载,不然会报错).

从实际的项目开发中，也是发现vendor.js是最大的，在带宽一定的情况下，非常影响加载速度，所以我们要利用引入 cdn 资源的方式，来减小vendor.js的大小：

1.webpack 配置项 externals(在 build/webpack.base.conf.js 中配置)

在module.exports = {}中添加如下信息alias 是项目内使用时的组件名称，ObjName 是某外部组件对外暴露的名称。：

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'alias': 'ObjName'
}

alias 是项目内使用时的组件名称，ObjName 是某外部组件对外暴露的名称。

例如：

vue 的 window 全局名称是 Vue

vue-router的 window 全局名称是 VueRouter

axios的 window 全局名称是 axios

2. 在项目 js 中引入：

# webpack 会检测这些组件是否在 externals 中注册
# 如果注册则不会将其打包到 app.js 中
import Vue from 'vue'
import VueRouter from 'vue-router'
import $ from 'jquery'

 这样配置的话 webpack 在 dev 运行或 build 打包时，就不会去本地组件包中查找这些在 externals 中注册的组件了（自然也不会将他们打包到一个 app.js 中去），而是会去 window 域下直接调用 Vue, VueRouter, $ 等对象。

3. index.html 模版配置如下