微客导航 » 文章资讯 » vue项目实现减少app.js和vender.js的体积操作

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

2023-07-12 09:44:03 163

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

在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。

webpack的外部扩展(externals)可以有效的解决。

externals配置选项提供了「从输出的bundle中排除依赖」的方法。相反，所创建的bundle依赖于那些存在于用户环境(consumer'senvironment)中的依赖。防止将某些import的包(package)打包到bundle中，而是在运行时(runtime)再去从外部获取这些扩展依赖(externaldependencies)。

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
//移除
importVuefrom'vue'
importElementUIfrom'element-ui'
import'element-ui/lib/theme-chalk/index.css'
importaxiosfrom'axios'
importQsfrom'qs'
Vue.use(ElementUI)
//添加
constVue=require('vue')
constElementUI=require('element-ui')
constaxios=require('axios')
constQs=require('qs')
///src/router/index.js
//移除
importRouterfrom'vue-router'
Vue.use(Router)
//添加
constRouter=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为库的版本号，若不写则默认最新版本.






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

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

在config\index.js中进行修改

productionGzip:true,

//需要下载相应的包npminstall--save-devcompression-webpack-plugin

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

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

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

productionSourceMap:false

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

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

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐