vue打包文件太大,vue打包大小

　　本文主要介绍了如何优化vue包生成的文件的js文件，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

　　 vue打包生成的js文件太大，已优化。1.组件是按需加载的。2.生成的地图文件将被删除。3 .引入cdn。4.路由懒加载。5.代码被压缩。6.最终项目打包后js文件太大。问题描述：1。变化不大的第三方库是cdn引入的。2.使用Vue的延迟加载。3.服务器和前端配置打开压缩。

vue打包生成的js文件过大优化

1.组件按需加载

　　现在大多数ui库都是以组件的形式处理的，所以你只需要导入那些需要模块的。

2.去掉生成map文件

　　打包时会生成地图文件，地图文件一般比较大，可以取消生成地图文件。

　　(1)config/index.js找到productionSourceMap，将true改为false。

3.cdn引入

　　这些UI组件库通过外部引入，减少了打包文件大的问题。

　　（1）index.html

　　引入外部文件并添加路由器视图。

　　（2）main.js

　　从页面中删除vue和vue路由器。

4.路由懒加载

5.代码压缩

　　Config/index.js查找productionGzip并将false更改为true

　　注意：首先要安装compression-webpack-plugin

　　npm安装-保存-开发压缩-web pack-插件

6.最后

　　优化前：

　　优化后：

项目打包之后js文件太大问题

问题描述

　　前端项目打包后。js文件太大，导致项目第一次加载很慢。查阅各种解决方案资料，总结以下几点：

1.使用cdn引入不怎么改变的第三方库

　　类似

　　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:

　　外部：{

　　vue: Vue ，

　　“vue路由器”:“vue路由器”，

　　元素-ui :元素，

　　电子海图:电子海图，

　　axios: axios

2.使用vue的懒加载

　　官方网站地址【https://router.vuejs.org/zh/guide/advanced/lazy-loading.html】

　　但是官网有一句话

　　如果您使用的是Babel，您将需要添加syntax-dynamic-import插件，以便Babel可以正确解析语法。

　　这个插件依赖于6.x.babel，需要注意。

3.服务器和前端配置开启压缩

　　服务器nginx配置添加：

　　gzip打开；

　　gzip _ static on-在不添加文件的情况下访问已加载或未压缩的文件非常重要。

　　配置前端config/index.js:

　　production zip:true，

　　然后介绍插件compression-webpack-plugin。

　　注意版本‘压缩-web pack-插件’:‘1 . 1 . 12’，

　　前两个文件大小没有减少多少，第三个文件大小减少最多。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。