配置webpack中externals來減小打包後vendor.js的體積

時間 2019-11-21

標籤配置 webpack externals 減小打包 vendor.js vendor 體積欄目 JavaScript 简体版

原文原文鏈接

在平常的項目開發中，咱們會用到各類第三方庫來提升效率，但隨之帶來的問題就是打包後的vendor.js體積過大，致使加載時空白頁時間過長，給用戶的體驗太差。爲此咱們須要減小vendor.js的體積，從本質上來解決這種問題。css

webpack的外部擴展(externals)能夠有效的解決。
externals 配置選項提供了「從輸出的 bundle 中排除依賴」的方法。相反，所建立的 bundle 依賴於那些存在於用戶環境(consumer's environment)中的依賴。防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。html

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

下面就以Vue項目爲例，介紹一下externals的使用。項目中引用了vue、vue-router、axios、element-ui、qs等第三方庫，那麼咱們的目標就是把這些從輸出的 bundle 中排除依賴。webpack

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

// 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方式引入web

// /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)vue-router

&lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
        &lt;link href="https://cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css" rel="stylesheet"&gt;
        &lt;title&gt;配置webpack中externals來減小打包後vendor.js的體積&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="app"&gt;&lt;/div&gt;
        &lt;script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.bootcss.com/element-ui/2.3.8/index.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;

至此，咱們全部的改造步驟都已完成。你能夠運行你的項目去檢測，改造先後的差距吧！element-ui

來源：http://www.javashuo.com/article/p-uhwcgigy-bb.htmlaxios