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

最新推荐文章于 2024-02-01 16:45:30 发布

熊小露的blog

最新推荐文章于 2024-02-01 16:45:30 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签：内存优化

本文链接：https://blog.csdn.net/Xl4277/article/details/109218012

版权

Vue 专栏收录该内容

25 篇文章 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开启gzip压缩文件, 等等，有兴趣可以去了解哈，这里就不详细说明了。