vue项目实现减少app.js和vender.js的体积操作


Posted in Javascript onNovember 12, 2020

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

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

.选用unpkg来作为第三方提供.如我想要axios包则输入网址为 https://unpkg.com/axios/ (末尾加斜杠代表你要查询该库的所有版本列表).然后你可以选择对应的版本如https://unpkg.com/axios@0.18.0/index.js 。其中 @0.18.0为库的版本号,若不写则默认最新版本.

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

4 代码打包成压缩包,浏览器支持自动解压的将会加载压缩包

在config\index.js中进行修改

productionGzip: true,

//需要下载相应的包 npm install --save-dev compression-webpack-plugin

补充知识:Vue打包之后会出现map文件,体积很大

build命令后占体积最大的竟然是.map文件,webpack如何设置不让编译出.map文件呢?

解决办法:去config/index.js中改一个参数:

productionSourceMap:false

把这个改为false。不然在最终打包的文件中会出现一些map文件

map文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。

以上这篇vue项目实现减少app.js和vender.js的体积操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript 实现各种跨域的方法
May 08 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
js选项卡的实现方法
Feb 09 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
详解vue 组件的实现原理
Nov 12 #Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 #Javascript
vue 图片裁剪上传组件的实现
Nov 12 #Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 #Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 #Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 #Javascript
vant 中van-list的用法说明
Nov 11 #Javascript
You might like
调频问题解答
2021/03/01 无线电
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
Angular2库初探
2017/03/01 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Python中表示一个对象的方法
2019/06/25 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
解决Python中回文数和质数的问题
2019/11/24 Python
python中提高pip install速度
2020/02/14 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
js实现弹框效果
2021/03/24 Javascript
单方离婚协议书范本(2014版)
2014/09/30 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
工程部经理岗位职责
2015/02/02 职场文书
财务总监岗位职责
2015/02/03 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
赢在中国观后感
2015/06/02 职场文书
个人更名证明
2015/06/23 职场文书
小王子读书笔记
2015/06/29 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书