华山资源网

vue项目实现减少app.js和vender.js的体积操作
网络编程 2024/12/23 佚名
3 1

配置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="/UploadFiles/2021-04-02/vue.min.js">


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的体积操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com