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/[email protected]/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>
4 程式碼打包成壓縮包，瀏覽器支援自動解壓的將會載入壓縮包
在config\index.js中進行修改
productionGzip: true,
//需要下載相應的包 npm install --save-dev compression-webpack-plugin
補充知識：Vue打包之後會出現map檔案，體積很大
build命令後佔體積最大的竟然是.map檔案，webpack如何設定不讓編譯出.map檔案呢？
解決辦法：去config/index.js中改一個引數：
productionSourceMap:false
把這個改為false。不然在最終打包的檔案中會出現一些map檔案
map檔案的作用：專案打包後，程式碼都是經過壓縮加密的，如果執行時報錯，輸出的錯誤資訊無法準確得知是哪裡的程式碼報錯。
有了map就可以像未加密的程式碼一樣，準確的輸出是哪一行哪一列有錯。
以上這篇vue專案實現減少app.js和vender.js的體積操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。