vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作

更新時(shí)間：2020年11月12日 09:28:32 作者：Angrybird233

這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

配置webpack中externals來減少打包后vendor.js的體積

在日常的項(xiàng)目開發(fā)中，我們會(huì)用到各種第三方庫來提高效率，但隨之帶來的問題就是打包后的vendor.js體積過大，導(dǎo)致加載時(shí)空白頁時(shí)間過長，給用戶的體驗(yàn)太差。為此我們需要減少vendor.js的體積，從本質(zhì)上來解決這種問題。

webpack的外部擴(kuò)展(externals)可以有效的解決。

externals 配置選項(xiàng)提供了「從輸出的 bundle 中排除依賴」的方法。相反，所創(chuàng)建的 bundle 依賴于那些存在于用戶環(huán)境(consumer's environment)中的依賴。防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(external dependencies)。

webpack之externals官方參考文檔傳送門，請戳這里→ externals

下面就以Vue項(xiàng)目為例，介紹一下externals的使用。項(xiàng)目中引用了vue、vue-router、axios、element-ui、qs等第三方庫，那么我們的目標(biāo)就是把這些從輸出的 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中，移除上面與之相關(guān)的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引入相應(yīng)的js文件和css文件(CDN地址：https://www.bootcdn.cn)

.選用unpkg來作為第三方提供.如我想要axios包則輸入網(wǎng)址為 https://unpkg.com/axios/ (末尾加斜杠代表你要查詢該庫的所有版本列表).然后你可以選擇對應(yīng)的版本如https://unpkg.com/axios@0.18.0/index.js 。其中 @0.18.0為庫的版本號(hào)，若不寫則默認(rèn)最新版本.

<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link  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>

4 代碼打包成壓縮包，瀏覽器支持自動(dòng)解壓的將會(huì)加載壓縮包

在config\index.js中進(jìn)行修改