配置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的体积操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持站长技术。
vbs:把一段文字中指定字符颜色变成红色的正则 functionc(Tstr,Word) Dimre Setre...
一、正则表达式概述 二、正则表达式在VBScript中的应用 三、正则表达式在VavaScr...
前言 相信大家都知道在IDE中代码的智能提示几乎都是标配,虽然一些文本编辑器也...
计算属性computed: 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持...
微信文件传输助手是微信电脑版与手机微信之间相互传输图片等文件的好工具,但很...
歌词编辑器 歌词编辑器 第一步:选择要播放的歌曲并播放 第二步:填写全部的歌词...
ADO对象: Connection Command Recordset Record Stream ASP支持的对象很多,可...
【排序算法】之lowb三人组冒泡、插入、选择 什么是lowb三人组 冒泡排序bubble so...
本文将研究 ES6 的 for ... of 循环。 旧方法 在过去,有两种方法可以遍历 javas...
一石激起千层浪,继中国区浩浩荡荡的大裁员告一段落之后,甲骨文并未因此收起手...