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

darkerXi發表於2018-09-07
WebJS

在日常的專案開發中，我們會用到各種第三方庫來提高效率，但隨之帶來的問題就是打包後的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)

<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="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>

至此，我們所有的改造步驟都已完成。你可以執行你的專案去檢測，改造前後的差距吧！

相關文章