Vue打包优化(webpack)

最新推荐文章于 2024-07-25 20:50:09 发布

放空di自己

最新推荐文章于 2024-07-25 20:50:09 发布

阅读量354

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/wqs1028/article/details/109391257

版权

H5 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了如何优化Vue CLI创建的项目以提升首屏加载速度。关键步骤包括：按需加载UI库，启用gzip压缩，图片压缩，不生成source map，分离vendor，路由和组件懒加载，以及使用CDN。这些措施能显著改善用户体验，但CDN引入的风险也需考虑。

摘要由CSDN通过智能技术生成

项目默认用vue-cli新建的项目，很多人直接用npm run build就打包成dist，然后部署到服务器上了，其实，这是不妥当的，没有任何打包优化，从而会导致首屏加载缓慢等性能问题；

所以需要做些优化配置后再打包，具体如下：

1.使用的三方UI库，诸如mint，vant，iview等，使用按需加载

2.开启gzip压缩(同时需要后台配置即Nginx支持gzip),

gzip压缩 gzip会对js、css文件进行压缩处理（压缩效果比较明显，能压缩至原来的1/3左右

对于图片进行压缩问题，对于png，jpg，jpeg没有压缩效果，对于svg，ico文件以及bmp文件压缩效果达到50%，图片可以通过https://tinypng.com/压缩后再引入项目

安装插件 compression-webpack-plugin

设置config/index.js中productionGzip: true

3.打包的时候不生成map文件

设置config/index.js中productionSourceMap: false

4.分离vendor

5.路由懒加载

6.组件懒加载

7.使用CDN导入(需要担心cdn挂掉)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

放空di自己

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 关于webpack配置的几个优化

前端李小白的博客

03-18

981

由于vue-cli3将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，那该怎么办呢？别慌，vue-cli3早就考虑到了这一点，它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。 vue.config.js官方配置指南在项目根目录下新建vue.config.js文件与package.j...

vue webpack 打包优化方法

梁小茹的博客

04-26

1065

webpack打包优化方法

参与评论您还未登录，请先登录后发表或查看评论

提高 webpack 构建 Vue 项目的速度

weixin_33755554的博客

04-05

187

前言最近有人给我的 Vue2 后台管理系统解决方案提了 issue ，说执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间。那么要怎么去实现呢...

H5网页打包成安卓apk（H5套壳成app），保姆级教程来咯

最新发布

都已经是第二年的立春、又何必执着于、当年的盛夏呢？

07-25

2832

说明，我什么其它功能都不要，所以我的功能模块我全部取消勾选了。就是应用的入口（线上的H5入口地址）

在vue.config.js中优化webpack配置的方法（持续更新）

wzy_PROTEIN的博客

05-13

561

在日常开发中我们离不开打包工具webpack，但是不同的配置会影响我们项目的运行构建时间，也会影响打包之后项目包的大小，这篇文章记录一下我使用过的可以优化webpack的配置。2、在vue.config.js的module.exports上面先定义设置值。注：以本专栏上篇文章里面的vue.config.js为基础，去加配置。①默认设置：（4M的图片使用默认设置压缩成1.4M）2、在vue.config.js的第一行引入依赖。options中可以切换使用默认还是自定义。三、对代码进行压缩，并移除控制台输出。

vue webpack与优化！

qq_25919495的博客

04-16

1275

01: 路由组件懒加载 component: () => import('./components/ShowBlogs.vue') 02: prefetch 关闭prefetch 01: 移除 prefetch 插件 config.plugins.delete('prefetch') // 或者修改插件配置 config.plugin('prefetch').tap(options => { options[0].fileBlackl...

vue使用webpack优化构建流程

Walter的博客

11-20

287

初衷：如果我们的 Vue 项目比较大．或者说项目中引入了许多第三方库，那么在执行 npm run build 构建项目的时候会极其的慢．比如我现在的项目就每次打包就要 83s。下面提供一些方法用来提供优化打包速度： resolve.modules 思路：webpack 的 resolve.modules 是用来配置模块库（即 node_modules）所在的位置。当 js 里出现 import ...

vue2+webpack搭建h5框架

03-12

Webpack则是一个模块打包器，它可以将各种资源（如JavaScript、CSS、图片等）进行打包和优化，以便在浏览器中高效运行。 **Vue2框架的核心概念：** 1. **组件化**：Vue2的核心是组件系统，允许开发者将UI拆分成可...

vue-cli webpack2项目打包优化分享

08-28

"Vue-Cli Webpack2 项目打包优化分享" 模块搜索范围优化在 Vue-Cli Webpack2 项目中，模块搜索范围的优化是非常重要的。默认情况下，Webpack 的 resolve.modules 配置会采用向上递归搜索的方式去寻找模块库（即 ...

深入理解基于vue-cli的webpack打包优化实践及探索

01-19

转眼已经是2019年，短短三四年时间，webpack打包工具成为了前端开发中必备工具，曾经一度的面试题都是问，请问前端页面优化的方式有哪些？...既然我们要优化webpack打包，肯定要提前对我们的bundle文件进行分析，分析各

webpack优化vue打包

weixin_44696379的博客

11-20

169

https://zhuanlan.zhihu.com/p/26710831转载自这里

有关前端性能优化的方案—Vue 代码层面性能优化+Webpack 层面的优化+基础的 Web 技术优化+非框架代码优化

技术前端，忠于热爱 @回忆哆啦没有A梦

07-29

3874

有关前端性能优化的方案—Vue 代码层面性能优化+Webpack 层面的优化+基础的 Web 技术优化+非框架代码优化

webpack优化（含vue-cli配置）

mkbird的博客

02-06

1810

提升开发体验使用Source Map让开发或上线时代码报错能有更加准确的错误提示。提升 webpack 提升打包构建速度使用让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。使用OneOf让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。使用排除或只检测某些文件，处理的文件更少，速度更快。使用Cache对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。使用Thead。

webpack打包vue项目进行打包优化

^_^

08-08

4147

一、理解打包当项目上线后，用户不可能页通过localhost:8080访问我们的页面，只能把项目放到服务器中，才能提供给用户访问，所以vue-cli内部集成的webpack，把vue、less、js等打包成浏览器可直接执行的代码。二、进行打包打包命令 num run build 输入完命令后会在项目的根目录创建一个dist目录这个目录里面就是我们打包后的结果。 dist目录下才是浏览器认识的代码，之前可以运行是通过脚手架工具提供给我们的否则浏览器是不认识.vue文件。 js文...

Vue项目Webpack优化实践，构建效率提高50%

qq_33834489的博客

07-09

279

https://juejin.im/post/5c3beaee6fb9a04a027a9641 1、缩小文件的搜索范围 1.1、优化Loader配置（1）优化正则匹配（2）通过cacheDirectory选项开启缓存（3）通过include、exclude来减少被处理的文件。 1.2、优化resolve.modules配置 1.3、优化resolve.alias配置 1.4、优化re...

Webpack性能优化

富朝阳的博客

01-04

2822

最近接到一个老的项目，使用webpack构建的，构建打包居然需要11分钟，也就意味着每次上线至少在12分钟以上，每次上线简直就是折磨，明明可以早15分钟跑路，实在忍不了了，开干，卷起来，下面我记录了此次优化的一些方法，供大家参考。当然不仅仅路由可以按需加载，对于loadash这种大型类库同样可以使用这个功能。按需加载的代码实现这里就不详细展开了，因为鉴于用的框架不同，实现起来都是不一样的。当然了，虽然他们的用法可能不同，但是底层的机制都是一样的。都是当使用的时候再去下载对应文件，返回一个Promise，当。

[万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境）

GoldenaArcher的博客

07-06

1620

[万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境）分离环境环境分析共用配置生产配置开发配置功能优化不导出死代码其他模式下增添代码压缩功能合并模块代码分割魔法注释提取 CSS 文件压缩 CSS 文件Hash 输出文件这次项目中使用的插件和加载器版本之前在 [万字逐步详解]使用 webpack 打包 vue 项目（基础生产环境）中比较详尽的手把手带着过了一遍 production 环境的部署，以及在 [万字逐步详解]使用 webpack-dev-server + ESLint 配置 v

webpack配置打包优化（vue.config.js）

朵拉多的博客

06-04

1124

新建vue.config.js 设置静态资源路径为"./"，否则打包后项目无法运行 module.exports = { publicPath: "./" } 关闭生产环境下的SourceMap映射文件，包可减少80% module.exports = { productionSourceMap: false, } 跨域配置 --说白了就是欺骗浏览器的 module.exports = { devServer: { open: false, // 自动启动浏览器 h.

vue2项目webpack打包的优化策略，降低打包文件后的大小

张羽的博客

06-27

4013

在做项目的时候总是会导入第三方库，我们都是下载到本地然后运用，所以引用网络的资源进行第三方库导入是一个很不错的优化策略。本来的：在mian.js中（这里的main.js是你的打包入口文件，你打包入口文件可能是main-prod.js）然后对于你的项目中的mian.js新建一个相同内容的js文件，然后将这2个mian.js文件分别命名为。首先，在项目的根目录下创建一个名为 vue.config.js 的文件（如果已存在，请跳过此步骤）。首先在你的vue.config.js的打包模式里面加入这段内容。