vue项目实现减少app.js和vender.js的体积操作

配置webpack中externals来减少打包后vendor.js的体积

在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。

webpack的外部扩展(externals)可以有效的解决。

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

webpack之externals官方参考文档传送门，请戳这里→ externals

下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、element-ui、qs等第三方库，那么我们的目标就是把这些从输出的 bundle 中排除依赖。

1、在/build/webpack.base.conf.js中，配置externals

				?

									// externals中的key是后面需要require的名字，value是第三方库暴露出来的方法名

									module.exports = {

									 //...

									 externals: {

									 'vue': 'Vue',

									 'vue-router': 'VueRouter',

									 'axios': 'axios',

									 'element-ui': 'Element',

									 'qs': 'Qs'

									 }

									}

2、在/src/main.js和/src/router/index.js中，移除上面与之相关的import引入，改为require方式引入

				?

									// /src/main.js

									// 移除

									import Vue from 'vue'

									import ElementUI from 'element-ui'

									import 'element-ui/lib/theme-chalk/index.css'

									import axios from 'axios'

									import Qs from 'qs'

									Vue.use(ElementUI)

									// 添加

									const Vue = require('vue')

									const ElementUI = require('element-ui')

									const axios = require('axios')

									const Qs = require('qs')

									// /src/router/index.js

									// 移除

									import Router from 'vue-router'

									Vue.use(Router)

									// 添加

									const Router = require('vue-router')

3、在/index.html中，通过CDN引入相应的js文件和css文件(CDN地址：https://www.bootcdn.cn)

.选用unpkg来作为第三方提供.如我想要axios包则输入网址为 https://unpkg.com/axios/ (末尾加斜杠代表你要查询该库的所有版本列表).然后你可以选择对应的版本如https://unpkg.com/axios@0.18.0/index.js 。其中 @0.18.0为库的版本号，若不写则默认最新版本.

				?

									<html>

									 <head>

									 <meta charset="utf-8">

									 <meta name="viewport" content="width=device-width,initial-scale=1.0">

									 <link href="https://cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css" rel="external nofollow" rel="stylesheet">

									 <title>配置webpack中externals来减少打包后vendor.js的体积</title>

									 </head>

									 <body>

									 <div id="app"></div>

									 <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>

									 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

									 <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

									 <script src="https://cdn.bootcss.com/element-ui/2.3.8/index.js"></script>

									 <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>

									 </body>

									</html>