记录一次vue项目打包后文件过大的优化过程

最新推荐文章于 2024-06-11 01:40:54 发布
最新推荐文章于 2024-06-11 01:40:54 发布
阅读量516 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28018929/article/details/110127736
版权

目录

echarts按需引入（212.61KB -> 89.89KB）

iview按需引入（128.94KB -> 5.83KB）

弃用moment.js，采用day.js（100+KB -> 2KB）

Element-UI按需引入（154.23KB -> 64.69KB）

ali-oss采用cdn引入（100+KB -> 0）

删除 / 替换部分svg图标

最近刚好比较有空，处理了一下网站首屏加载过慢的问题，做了诸如：路由懒加载、gzip压缩等一系列配置处理，效果也是挺明显，但还是会慢，因此决定从代码下手。在此记录一下截图，后面慢慢补上详细步骤~~~

echarts按需引入（212.61KB -> 89.89KB）

iview按需引入（128.94KB -> 5.83KB）

弃用moment.js，采用day.js（100+KB -> 2KB）

忘记截图了，从下图的面积大概可以看到效果

Element-UI按需引入（154.23KB -> 64.69KB）

ali-oss采用cdn引入（100+KB -> 0）

删除 / 替换部分svg图标

 

 

Yoohhal
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue打包文件过大
kyunsoo的博客
07-28 3374
H5:dist打包有8M左右. 原因：1）项目功能繁杂；2）选择任一地址等插件的下载； #尝试解决方法：局部引用element-日期时间选择器。 1,（.babelrc）添加 "es2015", { "modules": false } "plugins": [ [ "component", { "libraryName"...
vue项目打包后文件过大怎么办，如何优化加载速度
前端
12-25 1万+
路由懒加载 const Home = () => import('./views/Home.vue'); const MyInfo = () => import('./views/MyInfo.vue'); 在.babelrc中 "plugins": ["@babel/plugin-synt
Vue项目打包优化
~
08-16 527
因为项目里用的element ui的组件较多，优化前后打包体积无太大明显变化，只是减小了一点。注：（官网提供的完整组件列表缺少Scrollbar，需要手动添加）优化后打包体积大概会减小0.5M。2、按需引入element ui。...
vue cli 3 打包过大问题
weixin_30815469的博客
11-19 1040
　　vue cli 3 打包命令 npm run build，这种情况下的打包可以通过设置 vue.config.js里面的productionSourceMap: false。 　　如果是自己设置的打包环境，可以将每一个环境的NODE_ENV设置成 'production' 模式。然后你的包就会很小了 转载于:https://www.cnblogs.com/lankongclub/p/998...
Vue项目打包优化_umi minimize true
最新发布
2401_85124682的博客
06-11 335
productionSourceMap: false, //不输出map文件。5、公共代码抽离，写在configureWebpack模块中。第一点是核心，第二点呢其实主要是清理console。1、项目启动速度，和性能。3、减少打包后的体积。1、去重.map文件。7、开启Gzip压缩。
taro+vue3 引入echarts图表后分包，上传时主包体积太大无法上传解决办法
weixin_43209133的博客
08-18 584
3、由于分包引入了echarts, 小程序上传时，分包里的echarts插件被打包到主包的common.js中导致主包体积过大无法上传，这时config下的dev.js 或者index.js添加以下代码，就可以了，打包时分包里的插件打包进了分包。2、app.config.js 添加文件路径。1、新建分包moduleA。
vue-cli webpack2项目打包优化分享
11-30
在Vue CLI项目中，使用Webpack 2进行优化是提高应用性能和缩短构建时间的关键步骤。以下是一些关于如何优化Vue CLI项目的建议： 1. **减小文件搜索范围配置**： Webpack 的 `resolve.modules` 配置允许指定模块库...
记一次vue-webpack项目优化实践详解
10-17
在本文中，我们将深入探讨一次Vue-Webpack项目优化的实践过程。优化的目的是为了提高项目的性能，减少加载时间，特别是针对一个数据监测平台，其中包含了像ECharts和Three.js这样的重量级库。项目初始状态下，打包后...
记录：Vue移动端项目优化过程
01-20
【Vue 移动端项目优化过程】 在进行移动端项目的开发时，优化往往是一个重要的环节，尤其是在Vue.js框架下，为了提供更好的用户体验，我们需要关注白屏时间、资源加载速度以及打包效率等多个方面。以下是对Vue...
vue2商城打包后的文件
12-28
以下是对Vue2商城打包文件的详细解释： 1. **dist 文件夹**：这是Webpack的默认输出目录，包含了所有打包后的静态资源。在这个文件夹中，你通常会找到以下几个关键文件和文件夹： - **index.html**：这是应用的...
解决vue build打包之后首页白屏的问题
08-27
在开发Vue.js应用时，我们通常会使用`npm run build`命令将项目打包为生产环境版本。然而，有时候在执行这个命令后，发现打包后的应用在浏览器中打开时会出现首页白屏的情况。这个问题可能由多种原因引起，但最常见...
vue-cli项目中，通过cdn方式引入vchart来解决打包过大问题
一键写代码的博客
04-11 1299
1、在index.html中，引入v-charts的cdn地址。 因为v-charts 依赖echarts，所有，两者都需要引入。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
js日期比较大小_【译】如何使用webpack减少vuejs打包的大小
weixin_39867125的博客
11-20 123
我在Stanley Black & Decker的工业4.0团队工作。我们的团队最近为Stanley制造工厂创建了相当于App Store的产品。工厂可以访问市场并根据他们在该位置生产的产品选择他们需要的应用程序。这将构建一个自定义构建，将所有这些应用程序捆绑在一起，以便工厂运行。由于捆绑了如此众多的应用程序，我们的vue生产构建时，导致多个大小过度的警告。我们最初的构建规模当我们进行构建...
让你的vue项目体积更小点，打包速度更快点
开源世界
12-21 378
前言 有时候开发完一个vue项目后，会发现项目包又大打包速度还慢，里面还有很多冗余的文件，比如图片，.vue文件，.js文件等，如果你也遇到类似问题，或者你希望你的项目包更小点，打包速度更快点，本文也许对你有所帮助。 让项目体积更小点 压缩打包的文件 包安装 npm i compression-webpack-plugin@5.0.0 -D / cnpm i compression-webpack-plugin@5.0.0 -D /yarn add compression-webpack-plugin@5.
vue引入echart.js打包时特别大
weixin_33832340的博客
09-25 924
2019独角兽企业重金招聘Python工程师标准>>> ...
vue项目打包文件过大优化
hello world
04-03 1228
有些我是在打包前就做了的，但为了全面一点还是写一写，我用的是vue-cli3 配置文件vue.config.js 一、路由懒加载 每次进入一个新页面才加载该页面所需要的资源 component: () => import('@/view/setting/setting.vue') 二、把不常改变的库放到index.html中，通过cdn引入 最好引入指定版本，避免更新...
vue项目打包后文件过大的优化方法
qq_27474555的博客
11-15 3576
1、懒加载 打包部署项目时javaScript包会非常大，影响页面加载，路由懒加载是最常用和有效的方法，如果使用Babel，需要添加syntax-dynamic-import插件，才能使Babel正确地解析语法，命令如下： cnpm install @babel/plugin-syntax-dynamic-import --save-dev1.1、路由懒加载 方法一 const Foo = ...
快速解决Vue项目打包后文件过大问题
热门推荐
qq_19666289的博客
07-10 2万+
快速解决Vue项目打包后文件过大问题为什么打包后文件过大？如何快速解决一、路由懒加载【使用es提案的import()方式】二、cdn引入依赖合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的...
vue2项目打包优化，不打包未使用的文件
05-26
Vue2项目打包优化的一个常见方式是使用Webpack的tree shaking功能，它可以检测到哪些代码没有被使用，然后将这些代码从最终的打包文件中移除，从而减小打包文件的大小。 除此之外，还可以考虑使用动态导入（dynamic...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值