Vue的打包优化之路

最新推荐文章于 2024-07-06 21:00:00 发布
最新推荐文章于 2024-07-06 21:00:00 发布
阅读量544 收藏 2
点赞数
分类专栏： 前端 程序员 互联网 IT 编程 文章标签： 前端 编程 程序员 IT 互联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tzllxya/article/details/93395870
版权
本文详细介绍了Vue项目的打包优化过程，包括场景分析、默认配置、按需加载ECharts、使用date-fns替代moment、引入CDN优化公共库、更改打包策略以合并碎片包等措施，旨在提升首次访问的渲染速度和用户体验。
摘要由CSDN通过智能技术生成

Vue的打包优化之路

 

场景分析

一个结构简单，依赖蛮多的可视化项目，用到的库有

1. Vue + VueRouter + Vuex + axios

2. ECharts + 全省份地图文件 + 中国地图文件

3. ElementUI

4. moment (后面被 date-fns 代替)

5. lodash + lodash-decorator (用到了装饰器)

ECharts 的 JSON 地图文件占了很大一部分,大概有 1.96MB，gzip 以后 900KB，这一部分没有办法做处理。ECharts 组件本身可以使用按需加载

接着是依赖的一些公共库，比如 Vue 全家桶，这部分是可以提取到 CDN

最后是一些类似 lodash, moment 的工具库，可能只引用到了部分功能，但是默认会加载全部包，这样是不划算的。lodash, moment 默认都不支持 tree-shaking 因此需要手动按需加载或者使用更小体积的库。

先来看看默认没有经过优化的打包分析。

默认配置

只做了简单异步路由加载，各种库均没有按需引用。

地图JSON文件在体积处理上没有更好的优化办法

默认打包

这

最低0.47元/天 解锁文章
程序员一木
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue打包优化
Ajaloney的博客
01-19 286
首先在项目根目录新建一个vue.config.js文件 打包前必做: module.exports = { publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏） outputDir: 'dist', // 打包后文件的目录 （默认为dist） assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 } 1、去除生产环境sourceMap 问题: 在vue项目打包之后js,css文件夹中,会自动生成
vue -- 项目打包优化
weixin_34125592的博客
05-26 85
第三方库用cdn引入会大大减少服务器的压力，增加页面加载的速度，减少加载的时间，这样就实现了页面主体与第三方库的分离打包，首屏加载速度会加快 转载于:https://www.cnblogs.com/Aaron1Tall/p/10926288.html...
前端安全防线：使用Vue CLI配置代码压缩、加密和混淆功能_vue代码混淆
最新发布
Karka_的博客
07-06 928
!!!!!
VUE打包优化
七七的博客
03-24 257
vue项目打包优化打包。
vue 打包优化
小皮咖的博客
11-13 560
1. 去除控制台调试时的打印信息修改build/webpack.prod.conf.js在 plugins 中的 UglifyJsPlugin 的 compress 加入这两行： drop_debugger: true, drop_console: true 代码如下 new webpack.optimize.UglifyJsPlugin({ compress:{ wa
详解Vue打包优化之code spliting
08-27
Vue 打包优化之 Code Spliting Code Spliting 是一种常见的性能优化技术，在 Vue 项目中尤其重要。它的主要思想是将业务代码和基础库代码进行拆分，将首屏和非首屏的代码进行剥离，从而提高首屏加载速度和用户体验...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
浅谈vue项目打包优化策略
10-17
在Web开发中，尤其是使用Vue这样的前端框架时，项目的打包优化是一个非常关键的环节，它直接影响到应用的加载速度和用户体验。本文将深入探讨Vue项目打包优化策略，重点讨论如何通过组件按需加载和路由懒加载来缩减...
vue项目打包优化.zip
05-02
Vue项目的打包优化主要包括以下几个方面： ### 1. **配置Webpack** Webpack是Vue项目常用的构建工具，通过优化其配置可以显著提升打包效率。 - **开启Source Map**：在开发阶段，使用`cheap-module-eval-source-...
Vue 打包体积优化方案小结
10-15
本文将深入探讨Vue CLI 3中的打包优化策略，帮助开发者减小应用程序的体积，提高加载速度。 首先，我们可以利用`webpack-bundle-analyzer`工具来分析打包后的文件大小。通过在项目中安装这个插件，我们可以得到一个...
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
10-16
今天小编就为大家分享一篇Vue 实现CLI 3.0 + momentjs + lodash打包时优化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue - 打包优化
weixin_58726419的博客
11-04 326
目录 整体介绍 路由懒加载 什么是路由懒加载 路由懒加载中的魔法注释 包大小分析 去掉 console-log webpack配置排除打包 整体分析 打包瘦身 引用网络资源 具体配置-在生产环境时生效 webpack配置externals配置项 注入CDN配置到html模板 整体小结: 整体介绍 项目开发完成 打包 ： 用webpack做打包（把.vue, .js, .less -----------> .js, .css, .html） 在项目中都会
Vue——打包优化
qq812457115的博客
06-14 393
【打包分析】 【包分割optimization.splitChunks】 【图片压缩】
【vue】vue项目打包优化
xilejie的博客
04-07 347
vue cli 3.0中, 在vue.config.js中配置 configureWebpack:{ optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { // 删除注释 output:{ comments:false }, // 删除console debugger 删除警告 compress: { warnin...
webpack vue 打包优化
FE-阿阳的博客
07-16 1621
webpack vue 打包优化 问题描述 在项目优化中，有一种方案，不经常更新的第三方包可以不打在 vendor.js 中，可以在 .html 模板中引入，然后在 webpack 中配置排除这些包，但是会遇到一个问题，就是开发环境中，如果排除掉 vue.js 不打入 vendor.js 中，则无法使用 vue devtools 进行调试，如果不排除 vue.js ，则又会和模板中引入的...
Vue项目打包优化
lijincheng2022的博客
02-06 1276
这时候，就可以不将这些组件库打包，单独引入这些组件库的CDN，通过CDN来加载这些文件，这样速度将会大幅提升。在这段代码中，vue、vue-router、element-ui、axios、echarts就是包名。根据分析报告，可以发现，Element UI组件库和echarts库占的空间比相对较大。而value值中的windows对象的方法或属性，就是要查看js包中对应的代码。打开js代码，搜索module，就可以查找到。中，查找需要配置CDN的插件对应的版本。这里的key值中的第三方包名，就是在。
webpack打包vue项目优化
09-03
为了优化webpack打包vue项目，你可以考虑以下几个方面： 1. 使用代码分割：将代码拆分成多个小块，按需加载，减小初始加载的文件大小。可以使用webpack的SplitChunksPlugin插件来进行代码分割。 2. 使用懒加载：对于一些不常用或者较大的模块，可以使用懒加载的方式来延迟加载，减小初始加载的文件大小。可以通过vue-router的异步路由或者webpack的import函数来实现。 3. 压缩代码：使用webpack的UglifyJsPlugin插件来压缩代码，减小文件体积。 4. 使用缓存：通过设置webpack的output.filename和output.chunkFilename选项来生成带有hash的文件名，以便浏览器能够缓存文件，减少重复请求。 5. 图片优化：将图片进行压缩和转换为base64编码，以减小文件大小。可以使用url-loader或者file-loader插件来处理图片。 6. 清除无用代码：使用webpack的Tree Shaking特性去除未使用的代码，减少输出文件体积。 7. 配置合理的Devtool选项：在开发环境中使用sourcemap来方便调试代码，而在生产环境中使用cheap-source-map或者none等选项来减小构建时间和文件大小。 8. 优化打包时的性能：使用happypack插件来多线程处理webpack的loader和babel-loader，使用ParallelUglifyPlugin插件来并行压缩代码，提高构建速度。 以上是一些常见的webpack打包vue项目的优化方法，你可以根据具体情况选择适合你项目的优化策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值