在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的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. idea16使用maven命令clean、编译、打包jar或者war

    项目环境:idea16+jdk1.7+maven-3.3.9 项目说明:编写简单的java类,使用maven命令生成jar包,然后执行------->"java  -classpath ...

  2. 家用电脑架服务器提供web

    要搞一个可以对外的web服务,需要服务器,域名.这些都需要money,但有时,我们只是想自己可以在外面访问,或是提供给朋友看自己的网站有多牛.这时使用家用电脑配置一个可以提供web的服务器,就显得很必 ...

  3. 集合-Vector

    Vector中的操作是线程安全的. public Vector(int initialCapacity, int capacityIncrement) { super(); if (initialCa ...

  4. Maven单元测试

    // SKU码:系列前3位+6位年月日+3位序号(自动生产,取数据库中当天最大的,没有就赋值位001) // 订单编号:BRD+6位年月日+5位序号 // // 退单号:BRT+6位年月日+3位序号 ...

  5. SGU112

    题意:求a^b-b^a次,100以内.大数的-和*的模拟,用的模板,注意该模板中间和结果都不能出现负数. #include<iostream> #include<string> ...

  6. electron 自定义菜单

    快捷键:http://electronjs.org/docs/api/accelerator

  7. T1553 互斥的数 codevs

    http://codevs.cn/problem/1553/ 题目描述 Description 有这样的一个集合,集合中的元素个数由给定的N决定,集合的元素为N个不同的正整数,一旦集合中的两个数x,y ...

  8. log4j配置(转载)

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  9. BZOJ3786 星际探索

    @(BZOJ)[DFS序, Splay] Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其 ...

  10. 一张图搞清楚PMBOK所有过程的使用

      很多参加PMP培训的学员大概都会有一个感受,上课时似乎每个知识点都听懂了,大的知识框架也弄明白了,但是所有这些串起来在实践中怎么用呀!说的再直接一点,在考试的时候这些过程和活动是以怎样的逻辑来应用 ...