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

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

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

一、作用？

　　使用vue-cli创建项目，使用webpack打包。其中，有一个webpack优化webpack.optimize.CommonsChunkPlugin，它会将node_modules中的必需模块提取到vendor文件中，项目开发中，增加第三方模块，比如element-ui、vue-echarts等，vendor的包都会增大。这个时候，就需要考虑减轻vendor包的大小，增加构建速度。我们可以使用webpack的外部扩展(externals)功能。

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

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

　　简单的理解就是：webpack提供这个 externals 选项的作用是“从打包的bundle文件中排除依赖”。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script的方式去访问这些依赖。

二、怎么用？

　　下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、element-ui、qs等第三方库，那么我们的目标就是在 runtime 时通过 cdn 去获取依赖，在打包时忽略他的打包，从输出的 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>
复制代码

　　至此，我们所有的改造步骤都已完成。你可以运行你的项目去检测，改造前后的差距主要有3点：

（1）打包时间：打包时间，由原来的38s缩短至18s，大大减少了打包时间。

（2）打包之后包的大小：主要看vendor包的大小，由原来的1.45M缩小至41.3k，缩小的内容，我们使用cdn，使其存在于外部环境。由于externals属性，是将依赖排除，本该将node_modules中依赖包打入到vendor bundle中，变成外部扩展。

（3）浏览器加载：使用externals属性，外部扩展，会增加请求数，由原来的6个请求变成了9个请求。由于是使用CDN，非首次请求，会使用缓存中的数据，所以加载时间不受太大影响。

　　需要注意，如果发现问题，可以通过以下几个方向查找：

（1）script的先后顺序

（2）cdn的地址路径是否正确

（3）浏览器的window属性值，是否和你的externals属性的value相对应。可以在console控制台输出看看。

（4）externals的打包支持什么类型的，就和output.libraryTarget和output.library 这两个属性有关系了。

　　这篇文章讲解的比较清楚，可以看看：webpack externals详解：https://www.tangshuang.net/3343.html

posted @   古兰精  阅读(1694)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
历史上的今天：
2019-08-07 Fiddler抓包工具使用
点击右上角即可分享
微信分享提示
AI IDE Trae