使用vue打包，vendor文件过大，或者是app.js文件很大

傷城~ 2022-12-17 07:02 128阅读 0赞

### 通过 CDN 引入 比较大的一些包 ： ###

1、把不常改变又很大的库放到index.html中，通过cdn引入，：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.13/vue.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/view-design/4.2.0/iview.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.15.5/xlsx.min.js"></script>
        <link href="https://cdn.bootcdn.net/ajax/libs/view-design/4.2.0/styles/iview.min.css" rel="stylesheet">

2：找到build/webpack.base.conf.js文件，添加代码：

module.exports = { 
         externals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'echarts':'echarts',
            'base64':'base64',
            "view-design": 'iview',
            "iview": 'ViewUI',
            'xlsx':'XLSX',
          }
    
    }

这样webpack就不会把vue.js, vue-router, element-ui库打包了。

一般经过以上操作就文件大小已经缩小百分之七八十了；

如果还想再做进一步的优化，可以用到 [Vue 路由懒加载][Vue]，，[Vue开启gzip压缩文件][Vue_gzip], 等等，有兴趣可以去了解哈，这里就不详细说明了。

[Vue]: https://www.cnblogs.com/xiaoxiaoxun/p/11001884.html
[Vue_gzip]: https://www.cnblogs.com/loeyo/p/13367915.html

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关 Nuxt打包vendors.app.js很大，Nuxt打包优化。【Nuxt打包问题解决】

> 1、所有文章优先发表在个人博客上： [https://www.xdx97.com][https_www.xdx97.com] > 2、后续如果有修改的话，可能忘记更新到

迷南。/ 2023年06月15日 09:47/ 0 赞/ 370 阅读

相关使用vue打包，vendor文件过大，或者是app.js文件很大

通过 CDN 引入比较大的一些包： 1、把不常改变又很大的库放到index.html中，通过cdn引入，： <script src="https://cdn

傷城~/ 2022年12月17日 07:02/ 0 赞/ 129 阅读

相关 vue打包文件过大（一）

项目上线了，业务功能ok，界面外观ok。就是有点缺陷就是第一次登录太慢了要8-9秒。这是客户给我的说的，虽然我解释了单页应用的优缺点，但还是需要分析下。 ![在这里插入图片

àì夳堔傛蜴生んèń/ 2022年11月03日 00:58/ 0 赞/ 214 阅读

相关针对Vue打包生成的vendor和app文件过大的优化

文章目录 1、组件按需引入 element-ui按需引入 2、去掉生成map文件 3、cdn引入

痛定思痛。/ 2022年10月29日 01:41/ 0 赞/ 57 阅读

相关 html文件很大,webpack打包之后的文件过大如何解决

本文主要和大家介绍了webpack打包之后的文件过大的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。以前一直使用

短命女/ 2022年10月07日 11:59/ 0 赞/ 252 阅读

相关解决webpack打包文件过大的问题

webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。去除不必要的插件刚开始用

爱被打了一巴掌/ 2022年06月17日 01:28/ 0 赞/ 521 阅读

相关 vue项目打包之后js文件过大怎么办？

话不多说直接上图优化前： ![Center][] 优化后： ![Center 1][] 第一张图中的 1.09 M是我的项目经过打包

心已赠人/ 2022年06月10日 08:08/ 0 赞/ 429 阅读

相关 webpack 打包文件 vue 过大

打包优化 1、打包 vender 时不打包 vue、vuex、vue-router、axios 等，然后连上自己本地的路径在 build/webpack.base

àì夳堔傛蜴生んèń/ 2022年05月31日 04:41/ 0 赞/ 289 阅读

相关 mpvue引入echarts之后vendor.js文件过大

在build/webpack.base.conf.js下添加： var UglifyJsPlugin = require('uglifyjs-webpack-pl

柔光的暖阳◎/ 2022年01月28日 18:11/ 0 赞/ 411 阅读

相关 Vue 打包优化方案（解决 vendor.js 过大的问题）

博主推荐大家阅读我的另一篇文章：《[教你搭建一个页面秒开的Vue项目][Vue]》 > 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。优化方式

系统管理员/ 2021年12月18日 17:43/ 0 赞/ 1034 阅读