首页 > 其他分享 >vue打包体积优化

vue打包体积优化

时间:2023-10-30 23:55:04浏览次数:35  
标签:npm 文件大小 vue analyzer webpack 体积 bundle 打包

一、webpack-bundle-analyzer工具

1、安装

终端运行命令,根据包管理器自行选择命令

#NPM
npm install --save-dev webpack-bundle-analyzer

#YARN
yard add -D webpack-bundle-analyzer

  

2、代码引入

将代码引入到vue.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports={
	configureWebpack:{
		plugins:[
			new BundleAnalyzerPlugin()
		]
	},
	publicPath:process.env.NODE_ENV === "production" ? "/":"/",
	devServer:{
		host:'localhost',
		port:port,
		open:true,
	},
	
}

  

3、命令

引入完成执行 npm run build --report 命令,命令执行完会自动打开浏览器页面,如图:

start:打包之前输出文件大小

prased:打包之后输出文件大小

gizppen:开启gzip压缩后输出文件大小

 

4、减小打包体积,删除多余包

#删除多余包 
npm uninstall [包名]

#例
npm uninstall tinymce

  

5、常见问题

报错: npm error:Maximum call stack size exceeded

删除 node_module,执行命令:npm cache clean --force , npm install ,在执行命令前可以把package.json中的tinymce删除。

 

标签:npm,文件大小,vue,analyzer,webpack,体积,bundle,打包
From: https://www.cnblogs.com/bpsh/p/17797799.html

相关文章

  • 一个类似于Gridster的栅格布局系统Vue组件
    哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!VueGridLayout是一个类似于Gridster的栅格布局系统,适用于Vue.js,灵感来源于ReactGridLayout。特性可拖拽可调整大小静态部件(不可拖拽、调整大小)拖拽和调整大小时进行边界检查增减部件时避......
  • 基于Vue.js和Vanta.js的动态天空颜色效果实现
    背景最近在写一个Vue项目,想要在登录界面加一个动态背景效果,搜索之后发现了Vanta.js(https://www.vantajs.com/)这个库。Vanta可以借助three.js(WebGL)或p5.js渲染动态的3D背景效果,提供了多种预设。几种效果都挺不错的,最终我决定采用clouds效果。随即我发现这个效果是可......
  • 每日博客——使用Maven对Java独立应用程序进行编译打包
    使用Maven对Java独立应用程序进行编译打包1.安装Maven网盘下载 apache-maven-3.9.2-bin.zip链接为:https://pan.baidu.com/s/181shkgg-i0WEytQMqeeqxA(提取码:9ekc)sudounzip/export/server/apache-maven-3.9.2-bin.zip-d/export/server/cd/export/server/sudomvapac......
  • vue 将html保存成pdf文件
    结合html2canvas和jspdf插件处理/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2canvas'importJsPDFfrom'jspdf'/***@paramele要生成pdf的DOM元素(容器)*@parampadfNamePDF文件生成后的文件名字**/exportfunc......
  • [Vue学习]使用Vue-cli脚手架快速搭建项目
    安装vue-cli3npminstall-g@vue/cli验证vue版本vue--version 使用vuecreate项目名创建(需要cd进具体的目录)npmrundev(运行)npmrunbuild(编译)(也可以使用vue ui界面图形化方式进行创建) ==================================================可以直接使用下面方式创建项......
  • 34-Vue脚手架-组件的自定义事件(使用自定义事件优化Todo-List案例)
    组件的自定义事件1.一种组件间通信的方式,适用于子组件===>父组件(这里也可以使用props传递数据进行实现)2.使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)3.绑定自定义事件:1)第一种方式,在父组件中<!--通过父组件给子组件绑定一个......
  • vue关于render函数如何渲染v-html
    render函数如何渲染v-html,两种方式(适用于搜索关键字高亮) 例子:“互联网数据”搜索关键字"网"==>row.htmlStr:互联<spanclass="search-text">网</span>数据render:(h,{row})=>{//模板组件方式returnh({template:"<span>"+row.htmlStr+"&l......
  • Vue 3中toRaw和markRaw的使用
    文章目录Vue3的响应性系统使用`toRaw`使用`markRaw`使用场景1.与第三方库交互2.提高性能3.避免无限循环总结......
  • vuex
    一、概念:1.为什么要用vuex?传统:每个页面都要去重新请求后台得到将数据存到session、cookie中作用:专门为vue.js设计的集中式状态管理架构.数据仓库,主要管理状态(共用的属性或数据).把数据进行共享,每个页面想用,都可以来调用.......
  • vue中attrs的使用
    vue中attrs的使用1.attrs的作用用来进行子孙组件之间的数据传递接收父组件传过来,但是又没有在props中定义的数据。(class及style除外)2.父子组件之间数据传递的用法爷爷组件-grandpa:<template><div><span>爷爷</span><Son:phone="phone"sex="男"......