vue打包文件太大的问题怎么办,怎样进行优化处理
Admin 2022-09-08 群英技术资讯 1431 次浏览
今天我们来学习关于“vue打包文件太大的问题怎么办,怎样进行优化处理”的内容,下文有详解方法和实例,内容详细,逻辑清晰,有需要的朋友可以参考,希望大家阅读完这篇文章后能有所收获,那么下面就一起来了解一下吧。
现在大多的ui库都是以组件的形式进行处理,所以只需导入需要模块的即可
打包时会生成map文件,而map文件一般都比较大,可以取消生成map文件
(1)config/index.js找到productionSourceMap把true改为false
通过外部引入的方式引入这些UI组件库,从而减少打包文件过大的问题
(1)index.html
引入外部文件,并且加上<router-view>
(2)main.js
去掉在页面引入vue和vue-router
config/index.js 找到 productionGzip 把 false 改为 true
注意:要先安装compression-webpack-plugin
npm install --save-dev compression-webpack-plugin
优化前:
优化后:
前端项目打包之后.js文件太大,导致项目第一次加载的时候太慢,查阅各种解决方案资料,汇总以下几点:
类似于
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
webpack.base.conf.js 添加:
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'echarts': 'echarts',
'axios': 'axios'
},
官网地址[https://router.vuejs.org/zh/guide/advanced/lazy-loading.html]
但是官网有一句
如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。
这个插件依赖于6.x.babel 需要注意
服务器nginx配置添加:
gzip on;
gzip_static on; --这个很重要 不加的话 访问加载的还是未压缩的文件
前端配置config/index.js:
productionGzip: true,
然后再引入插件 compression-webpack-plugin
需要注意版本 "compression-webpack-plugin": "^1.1.12",
前面两种 文件大小并没有减少太多 使用第三种的时候减少的最多。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
Angular指令如何保持关注点的分离?本篇文章带大家了解一下通过 Angular 指令保持关注点分离的方法,希望对大家有所帮助!
在实际的应用中,有一些需求需要我们对二维数组、多维数据做降维,一些朋友可能对于数组降维的方法不是很了解,对此下面小编就给大家分享一下,需要的朋友可以参考。
这篇文章主要为大家详细介绍了小程序实现自定义多层级单选和多选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下
本文主要介绍了冻结JS对象方法技术,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008