vue-cli之build体积加载优化

想你开心每一天

于 2023-08-07 18:44:30 发布

阅读量57

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/NGY198888/article/details/130709257

版权

vue版本

@vue/cli 5.0.4
创建项目使用了vue2
compression-webpack-plugin@3.0.0.0

过程

未作任何优化，build后：
使用splitChunks后
使用compression-webpack-plugin后

yarn add compression-webpack-plugin@3.0.0.0 -D

按需引入element-ui

vue add element
npm install babel-plugin-component -D

https://www.swvq.com/article/detail/1089
第三方ui库移出去

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

想你开心每一天

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-cli之build体积加载优化

创建项目使用了vue2。
复制链接

扫一扫

vue-cli项目包体积过大，完美解决教程

人与人之间最小的差别是智商，最大的差别是坚持。

07-31

3062

使用cdn 打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn 直接引入到根目录的index.html中。在webpack设置中添加externals，忽略不需要打包的库。 externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios' } ...

vue性能优化之build后包体积太大（1）

会点php的前端小渣渣

10-15

3358

基于vue-cli3.0构建项目，npm引入多个第三方包。build之后，包体积太大导致首屏过长。----毫无体验感！！！实践的项目喜欢捣鼓可以clone下来只总结了亲测效果明显的几种方案，解决方案大多来自于日常总结及各路大佬，如有不足，请大佬补充~ 1、路由懒加载在 Webpack中，我们可以使用动态 import语法来定义代码分块点 (split point)： import('./About.vue') // 返回 Promise 如果您使用的是 Babel，你将需要添加.

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

Vue项目build打包webpack优化

weixin_43443341的博客

11-13

2968

webpack-bundle-analyzer 打包分析工具 1、首先安装模块 npm i webpack-bundle-analyzer -D 2、在Vue-Cli3中配置 // vue.config.js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.e...

Vue.js关于打包时（build）进行体积优化的一些总结

doyoulikemysing的博客

04-29

3280

解决vue打包时，包体积过大导致上线后访问体验不佳的问题第一次打包如果失败记得打包第二次 1、利用cdn节点进行引入的优化运行代码时，代码会运行一条再执行下一条，所以我们运用cdn，来缓解压力，让页面的反应更加快捷将main.js中用 import 数据删掉在public/index.html 中加入如下引用 <link rel="stylesheet" type="tex...

vue项目打包提示文件体积过大的解决方法

yuelinana的博客

08-21

4883

使用vue搭建项目准备打包部署，输入命令：npm run build 出现警告，asset size limit：The following asset(s) exceed the recommended size limit (244 KiB) 意为编译的文件体积过大，解决方式如下：在 vue.config.js 文件中添加以下代码即可解决 configureWebpack: ...

vue-cli项目优化方法- 缩短首屏加载时间

08-27

vue-cli 项目优化方法 —— 缩短首屏加载时间 Vue-cli 项目优化是指通过各种技术手段和优化方法来提高 Vue 项目的性能和加载速度，缩短首屏加载时间是其中一个重要的方面。以下是相关知识点的详细介绍：一、使用 ...

详解webpack+vue-cli项目打包技巧

11-30

在 `vue-cli` 项目的 `build` 文件夹下的 `webpack.prod.conf.js` 文件中，我们可以配置 `HtmlWebpackPlugin` 插件。`HtmlWebpackPlugin` 负责生成 `index.html` 文件，并自动引入打包后的 JavaScript 和 CSS 文件。...

windows下vue-cli导入bootstrap样式

08-30

- 考虑使用Vue的按需加载（tree shaking），只引入需要的Bootstrap组件和JavaScript插件，以减少打包后的体积。 - 对于生产环境，记得使用`npm run build`进行打包，以获取优化过的静态资源。通过以上步骤，你就...

vue-cli脚手架config目录下index.js配置文件的方法

10-18

- `bundleAnalyzerReport`: 是否生成打包分析报告，通过 `npm run build --report` 观看，可帮助优化项目体积。 4. **开发服务器配置**： - `port`: 开发服务器的监听端口，默认为 `8080`。 - `autoOpenBrowser`...

优化vue构建速度优化

a1983029606的博客

01-17

1974

vue开发环境构建优化使用vue-cli默认打包配置时，开发环境往往构建很慢这是默认配置构建速度，整整花了50s 这是优化后构建速度，可以看到快了十倍多。这里使用了缓存进行构建，即使关机重启后也可以加快构建速度。大大的减少了我们等待的时间。接下来我们来看下如何配置的：在vue.config.js中加上： const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); const devPlug..

build vue 选哪个_vue项目build构建的一些优化

weixin_33479485的博客

01-31

532

1、路由的使用使用路由懒加载的方式替换原始的设置路由方式// import Vue from 'vue'// import Router from 'vue-router'const homepage = () => import ('@/components/homepage')const addworks = () => import ('@/pages/addworks')...

vue-cli 3.0 build包太大导致首屏过长的解决方案

掘金者说

04-16

1168

vue-cli 3.0 build包太大导致首屏过长的解决方案前言：最近用vue-cli 3.0 构建一个小型的工单管理系统，完工后build发现一个chunk-vendors包就达到985kb，加上其他一些资源文件，首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢！ 1. 路由懒加载新的改变结合Vue的异步组件再结合webpack的代码分割，我们可以轻松的实现路由懒加载。 ...

解决vue-cli npm run build之后vendor.js文件过大的问题

热门推荐

博客

11-22

2万+

问题 &amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓

快速解决Vue项目打包后文件过大问题

qq_19666289的博客

07-10

2万+

快速解决Vue项目打包后文件过大问题为什么打包后文件过大？如何快速解决一、路由懒加载【使用es提案的import()方式】二、cdn引入依赖合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的...

vue-cli build vendor.js 过大

hds1021的博客

07-05

3325

vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。解决方案：首先，vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有必要打包到vendor.js中。在根目录下的index.html中使用cdn节点导入这些js<div id="app">&...

解决vue打包wendor过大的问题

sowhat_WLQ的博客

06-21

5116

1.找出原因一般情况下不会出现过大的问题，但是当你引入一些UI组件库的时候会导致打包文件过大的问题。所以我们需要通过外部引入的方式引入这些UI组件库，从而减少打包文件过大的问题。 2.解决方案 1.外部引入UI组件库 1.在index.html的文件头部引入element-ui的组件库。引入vue &amp;amp;lt;!-- 开发版，开发过程中使用此方案--&amp;amp;gt; &amp;amp;lt;script...

vue项目打包后文件过大怎么办，如何优化加载速度

前端

12-25

1万+

路由懒加载 const Home = () =&amp;amp;amp;gt; import('./views/Home.vue'); const MyInfo = () =&amp;amp;amp;gt; import('./views/MyInfo.vue'); 在.babelrc中 &amp;amp;quot;plugins&amp;amp;quot;: [&amp;amp;quot;@babel/plugin-synt

vue build打包文件太大

qq_43526066的博客

12-21

854

build/webpack.prod.conf.js new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, //drop_console 传递true以放弃对控制台的调用。*功能 drop_console: true, ...

vue-cli3项目搭建与优化全攻略

"vue-cli3 从搭建到优化的详细步骤" 在本文中，我们将深入探讨如何使用vue-cli3从零开始搭建一个Vue.js项目，并逐步对其进行优化。Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化...