时间:2021-05-26
配置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://pression-webpack-plugin
补充知识:Vue打包之后会出现map文件,体积很大
build命令后占体积最大的竟然是.map文件,webpack如何设置不让编译出.map文件呢?
解决办法:去config/index.js中改一个参数:
productionSourceMap:false
把这个改为false。不然在最终打包的文件中会出现一些map文件
map文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
以上这篇vue项目实现减少app.js和vender.js的体积操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
新建一个外部公共的js文件app.js,定义一个对象并输出,如下:varhybrid={}window.Hybrid=hybridif(window.Vue){
插件描述:particles.js用于创建粒子的轻量级JavaScript库。查看效果源码下载使用加载particles.js和配置粒子app.js/*part
目标建立一个lesson5项目,在其中编写代码。代码的入口是app.js,当调用nodeapp.js时,它会输出CNode(https://cnodejs.or
在开始本文之前请确保安装好Redis和Node.js以及Node.js的Redis扩展——node_redis首先创建一个新文件夹并新建文本文件app.js文件
背景在Vue项目中,引入到工程中的所有js文件,编译时都会被打包进vendor.js,也就导致了vendor.js文件体积变得相当臃肿,一定程度上影响着页面的渲