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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 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
php文件缓存类汇总
2014/11/21 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
php封装的page分页类完整实例
2016/10/18 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
JavaScript 基础问答三
2008/12/03 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
实例浅析js的this
2016/12/11 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
selenium+python自动化测试之多窗口切换
2019/01/23 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python selenium 获取接口数据的实现
2020/12/07 Python
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
建议书标准格式
2014/03/12 职场文书
欢度春节标语
2014/07/01 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
小学校长个人总结
2015/03/03 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技