vue打包后js文件太大优化

最新推荐文章于 2025-05-07 17:18:14 发布
原创 最新推荐文章于 2025-05-07 17:18:14 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js

1，路由懒加载

component: resolve => require(['@/views/XXX/XXX.vue'], resolve)

{
   path: 'index',
   component: resolve => require(['@/views/XXX/XXX.vue'], resolve),
   name: 'XXX',
   meta: { title: 'XXX', noCache: true },
},
vue3 - 打包后chunk-vendors.js文件很大导致页面加载很慢、页面白屏、解决方案，如何解决vue3+vue/cli-service打完包vendors.js太大导致加载非常慢（完美解决
高级前端工程师
03-08 1万+
vue3，chunk-vendors.js，build打包后加载太慢，打包后页面一直加载不出来，build打包完毕chunk-vendors.js文件特别大加载很慢怎么办，如何解决vue-cli打包后vendors.js，解决vue打包后vendor.js文件过大问题，使用vue打包时vendor文件过大，build包太大导致首屏过长的解决方案，解决vue-cli脚手架打包后vendor文件过大的问题，vue打包时，chunk-vendors.js文件过大怎么优化，首页加载慢问题，解决vue打包chunk-
解决vue打包后vendor.js文件过大问题
12-08
第一步、cdn引入各种包 index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包，如下图： 第二步、在使用vue等包的地方，注释掉import引入 在所有使用vue的地方注释掉引入的vue等包，但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用，除了Vue.use(ElementUI), 如果加上这句话，还是会打包element-ui到vendor.js文件中 在main.js 在store文件加中的index.js 在api/request.js文件中 在router
使用vue打包时vendor文件过大或者是app.js文件很大的问题
12-09
第一次使用vue2.0开发，之前都是用的angular1.x。在使用vue-cli脚手架打包后（UI用的Element-ui），发现vendor文件很大，将近1M左右。。后来翻阅资料才明白，原来webpack把所有的库都打包到了一起，导致文件很大。 我的解决办法：   1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样： 然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代码 externals: { 'vue': 'Vue', 'vue-router': 'VueRouter',
webpack3 打包vue项目导致入口文件APP.JS体积过大
qq_37550440的博客
06-26 3819
webpack3 打包vue项目导致app体积过大 1.优化 devtool 中的 source-map2.剥离css文件，单独打包3.使用 UglifyJSPlugin 压缩。 4.提取公共依赖5.开启gzip压缩7.不打包第三方库8.路由懒加载
解决Vue项目打包后文件过大问题
热门推荐
weixin_39964419的博客
10-11 1万+
首屏加载时间优化
Vue打包导致 JS 很大的问题解决【完美解决】
weixin_1095的博客
05-07 1301
这个问题困扰我很久了，一直没有解决。最后只好把 js 放到七牛云上面cdn，没想到，这样直接导致，流量访问超出，达到了百分之600，然后被通知欠费。这才痛下决心一定要解决这个问题。阅读下面的文章，一定会给你带来帮助，你所遇到的问题我基本都遇到了。
解决vue-cli脚手架打包后vendor文件过大的问题
10-17
在使用Vue CLI构建项目时，有时会遇到打包后的vendor文件体积过大的问题，这会导致页面初始化加载速度变慢，甚至出现明显的白屏现象。解决这个问题是优化前端性能的关键步骤之一，因为大型的vendor文件会增加用户...
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
11-21
问题 由于这次项目是在初学 Vue 之后的第一个正式项目，没有考虑到类似 路由懒加载、 按需加载的问题 ，所以呢，也算是没经验。 到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。 优化前： app.js 2.3MB vendor.js 2.4MB vendor.css 612kB app.js.map 9.13MB vendor.js.map 16.21MB //不一一列举.... 优化 接下来看看优化方法。 优化步骤1： 不生成.map文件 在 webpack.prod.cong.js 文件下，修改配置项 sourceMap 设置为 false 或者删除：
vue 首屏优化 主要针对index.js过大问题，splitChunks分包白屏
Li_Ning21的博客
07-26 5140
接手了一个项目，打包完index.js居然有十几M，本地还好，部署线上以后 网速快的情况可能十几秒就能加载完，网速慢的话就会出现 “喂，你们项目挂了，白屏一直。。 哦！！ 有了有了有了 挂了哈。” 慢到一定境界了。 查询了很多资料，发现原来webpack也不是那么那么的晦涩难懂，真用到的时候， 学学 用用还挺好玩。 首先是最管用的一招，就是直接在服务端nginx开启gzip压缩。贼好使，开了就管用。具体方法如下: gzip on; gzip_disable "msie6"; gzip_static
Vue项目打包文件过大（优化）
良_123的专栏
01-05 5402
问题 Vue项目打包文件过大，项目加载慢，前端可以做哪些优化？ 分析 其实，这是项目的性能优化，一般在项目开始开发之前就应该考虑，但在实际开发中，开发之前会被忽略。 解决方案如下 一、懒加载 什么叫懒加载？在需要的时候进行加载，随载随用。 常见的有：路由、图片等。 例子：官方路由懒加载 { path: "/timeAxis", name: "timeAxis", component: () => import ('@/views/xxx'), }
vue打包生成的js文件过大优化
weixin_37178391的博客
06-13 5196
vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后 项目打包之后js文件太大问题 问题描述 1.使用cdn引入不怎么改变的第三方库 2.使用vue的懒加载 3.服务器和前端配置开启压缩1.组件按需加载 现在大多的ui库都是以组件的形式进行处理，所以只需导入需要模块的即可 2.去掉生成map文件 打包时会生成map文件，而map文件一般都比较大，可以取消生成map文件（1）config/index.js找到productionSo
解决vue-cli 3 打包后vendor.js文件过大问题
hl_Abel的博客
11-11 1574
第一步 用cdn引入各种包 （vue、vuex、vue-router、element-ui、axios、echarts等） 第二步在使用vue等包的地方，注释掉import引入 在main.js 在store文件加中的index.js 在api/request.js文件中 在router/index.js文件中 第三步 打包忽略vue等包 在vue.config.js中，加上configureWebpack配置 并将productionSourceMap设为false 到此如果打完包后 ven
vue打包后，首次加载慢问题(js过大，分包打包)
qq_34169240的博客
07-24 1151
【代码】vue打包后，首次加载慢问题(js过大，分包打包)
vue项目打包后文件过大的优化方法
qq_27474555的博客
11-15 3814
1、懒加载 打包部署项目时javaScript包会非常大，影响页面加载，路由懒加载是最常用和有效的方法，如果使用Babel，需要添加syntax-dynamic-import插件，才能使Babel正确地解析语法，命令如下： cnpm install @babel/plugin-syntax-dynamic-import --save-dev1.1、路由懒加载 方法一 const Foo = ...
vue main.js 文件太大 如何优化
最新发布
08-05
在 Vue 项目中，`main.js` 是应用的入口文件，通常用于初始化 Vue 实例、引入核心库、插件以及配置全局设置。如果 `main.js` 文件体积过大，可能会影响项目的加载性能，尤其是在生产环境中。为了优化 `main.js` 的体积，可以从以下几个方面入手： ### 1. 按需引入 Vue 及其插件 默认情况下，某些插件或库可能会引入整个模块，而不是按需引入所需的功能。例如，使用 `element-ui` 或 `lodash` 时，可以通过按需加载来减少打包体积。 ```javascript // 不推荐（全量引入） import _ from 'lodash'; // 推荐（按需引入） import debounce from 'lodash/debounce'; ``` 对于 Vue 本身，如果使用的是 Vue 3，并且构建工具支持 Tree Shaking（如 Vite 或 Webpack 5），则可以自动移除未使用的模块，从而减小最终的 `main.js` 体积。 ### 2. 使用异步组件和懒加载 将部分组件或路由设置为懒加载，可以有效减少初始加载时 `main.js` 的体积。例如，在 Vue Router 中： ```javascript const MyComponent = () => import('../views/MyComponent.vue'); ``` 通过这种方式，只有在用户访问对应路由时才会加载该组件，从而实现按需加载。 ### 3. 移除开发环境依赖 确保在生产构建时移除所有开发环境相关的依赖和调试代码。例如： ```javascript if (process.env.NODE_ENV === 'production') { // 只在生产环境启用某些优化逻辑 } ``` 此外，可以使用 `webpack` 的 `DefinePlugin` 来定义环境变量，帮助 Tree Shaking 更好地识别并移除无用代码。 ### 4. 使用 Vue 插件的按需加载 某些插件支持按需加载，例如 `vue-ls` 可以根据需要引入特定功能，而不是全局注册。这样可以避免将整个插件打包进 `main.js`。 ```javascript import { Storage } from 'vue-ls'; Vue.use(Storage, { namespace: 'vuejs__', name: 'ls', storage: 'local', }); ``` ### 5. 使用 Webpack 或 Vite 的优化配置 在 `vue.config.js` 中，可以通过配置 `splitChunks` 将第三方库和公共模块分离到单独的 chunk 中： ```javascript // vue.config.js module.exports = { configureWebpack: { optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all', }, }, }, }, }, }; ``` 通过这种方式，`main.js` 中将只包含项目的核心逻辑，而第三方库会被打包到独立的文件中，提升加载效率。 ### 6. 使用 Gzip 压缩 在生产环境中启用 Gzip 压缩可以显著减小文件体积，提高加载速度。可以在 `vue.config.js` 中添加 `CompressionWebpackPlugin`： ```javascript const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8, }), ], }, }; ``` ### 7. 使用 Tree Shaking 和 ES Modules 确保项目使用 ES Modules（`import`/`export`）而不是 CommonJS（`require`），以便构建工具可以更好地进行 Tree Shaking，移除未使用的代码。 ### 8. 检查第三方库的大小 使用工具如 `webpack-bundle-analyzer` 分析 `main.js` 的组成，识别出体积较大的依赖项，并尝试寻找更轻量级的替代方案。 ```bash npm install --save-dev webpack-bundle-analyzer ``` 然后在 `vue.config.js` 中添加： ```javascript const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); module.exports = { configureWebpack: { plugins: [ new BundleAnalyzerPlugin(), ], }, }; ``` 运行 `npm run build` 后，会打开一个可视化界面，展示各模块的大小分布，帮助优化 `main.js`。 --- ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值