在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的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)

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

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

来源：https://segmentfault.com/a/1190000016309142

配置webpack中externals来减少打包后vendor.js的体积的更多相关文章

  1. webpack减少打包后文件体积的几种方法

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  2. vue中打包后vendor文件包过大

    vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...

  3. webpack配置：增加babel支持、打包后调试

    一.babel支持 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包 ...

  4. 走近webpack（2）--css打包及压缩js

    前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...

  5. 当碰到需要调试打包后的js

    在react中经常开发碰到不能热更中进行调试的,如IE之类的 这个时候我们就需要打包才能运行看到效果, 但是往往每次打包都需要很长的时间: 这个时候我们就可以直接找到打包后的文件,直接在改文件中修改: ...

  6. 配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境

    前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...

  7. vue - 减少打包后的体积

    打包命令: npm:npm run build yarn:yarn run build 路径:/config/index.js 是否产生map文件,置为false.

  8. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  9. webpack基础以及webpack中babel的配置

    webpack 安装 npm 初始化,控制台输入 npm init -y webpack 安装 npm i webpack webpack-cli -D 新建 webpack.config.js co ...

随机推荐

  1. 强大！不懂html也来学网抓（xmlhttp/winhttp+fiddler）

    http://club.excelhome.net/thread-1159783-1-1.html 学习html强力推荐此网站:http://www.w3school.com.cn/ ,绝对权威 交流 ...

  2. 【JQ同胞遍历】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Biorhythms（poj 1006）

    Description 人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这天,人会在相应的方面表现出色.例如,智力周期的高峰 ...

  4. 巴厘岛的雕塑 BZOJ 4069

    巴厘岛的雕塑 题解: 题意是要求分组使每组的和按位取或的值最小 那么考虑贪心,尽量使高位为0 于是枚举位置,从最高位枚举 假设当前枚举到第l位. 令 f[i][j] 表示前 i 个数分成 j 组,满足 ...

  5. golang测试框架--smartystreets/goconvey

    视频教程和配套博客:goconvey - 课时 1:优雅的单元测试 Go 语言虽然自带单元测试功能,在 GoConvey 诞生之前也出现了许多第三方辅助库.但没有一个辅助库能够像 GoConvey 这 ...

  6. ELK之收集Nginx、Tomcat的json格式日志

    1.安装Nginx yum -y install nginx vim /etc/nginx/nginx.conf # 修改日志格式为json格式,并创建一个nginxweb的网站目录 log_form ...

  7. java集合系列之HashMap源码

    java集合系列之HashMap源码 HashMap的源码可真不好消化!!! 首先简单介绍一下HashMap集合的特点.HashMap存放键值对,键值对封装在Node(代码如下,比较简单,不再介绍)节 ...

  8. 【postgresql】postgresql中的between and以及日期的使用

    在postgresql中的between and操作符作用类似于,是包含边界的 a BETWEEN x AND y 等效于 a >= x AND a <= y 在postgresql中比较 ...

  9. 【hql】spring data jpa中 @Query使用hql查询 问题

    spring data jpa中 @Query使用hql查询 问题 使用hql查询, 1.from后面跟的是实体类 不是数据表名 2.字段应该用实体类中的字段 而不是数据表中的属性 实体如下 hql使 ...

  10. 【Android开发—智能家居系列】（一）：智能家居原理

    来到JCZB公司的第二天,就接到了开发类似于小米智能家庭APP的任务.组长让我在手机上安装上此款APP,给了我个小米智能插座,就让我开始了解需求.这便开启了我的智能家居旅程.说实话,我也真是out的无 ...