使用 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 模版配置如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
</body>
</html>