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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
详解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/03 冲泡冲煮
在php和MySql中计算时间差的方法
2011/04/22 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
js 事件小结 表格区别
2007/08/13 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python获取外网ip地址的方法总结
2015/07/02 Python
深入理解python中的atexit模块
2017/03/07 Python
python WindowsError的错误代码详解
2017/07/23 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
详解Python用户登录接口的方法
2019/04/17 Python
python pandas模块基础学习详解
2019/07/03 Python
python写入文件自动换行问题的方法
2019/07/05 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
党员自我评价分享
2013/12/13 职场文书
单位委托书怎么写
2014/08/02 职场文书
开发房地产协议书
2014/09/14 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript