vue打包⽣成的⽂件的js⽂件过⼤的优化⽅式⽬录
vue打包⽣成的js⽂件过⼤优化
1.组件按需加载
2.去掉⽣成map⽂件
3.cdn引⼊
4.路由懒加载
5.代码压缩
6.最后
nginx部署前端项目项⽬打包之后js⽂件太⼤问题
问题描述
1.使⽤cdn引⼊不怎么改变的第三⽅库
2.使⽤vue的懒加载
3.服务器和前端配置开启压缩
vue打包⽣成的js⽂件过⼤优化
1.组件按需加载
现在⼤多的ui库都是以组件的形式进⾏处理，所以只需导⼊需要模块的即可
2.去掉⽣成map⽂件
打包时会⽣成map⽂件，⽽map⽂件⼀般都⽐较⼤，可以取消⽣成map⽂件
（1）config/index.js到productionSourceMap把true改为false
3.cdn引⼊
通过外部引⼊的⽅式引⼊这些UI组件库，从⽽减少打包⽂件过⼤的问题
（1）index.html
引⼊外部⽂件，并且加上<router-view>
（2）main.js
去掉在页⾯引⼊vue和vue-router
4.路由懒加载
5.代码压缩
config/index.js 到 productionGzip 把 false 改为 true 注意：要先安装compression-webpack-plugin
npm install --save-dev compression-webpack-plugin
6.最后
优化前：
优化后：
项⽬打包之后js⽂件太⼤问题
问题描述
前端项⽬打包之后.js⽂件太⼤，导致项⽬第⼀次加载的时候太慢，查阅各种解决⽅案资料，汇总以下⼏点：1.使⽤cdn引⼊不怎么改变的第三⽅库
类似于
<script src="cdn.bootcss/vue-router/3.0.1/vue-router.min.js"></script>
<script src="cdn.bootcss/vue/2.5.15/vue.min.js"></script>
f.js 添加：
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'echarts': 'echarts',
'axios': 'axios'
},
2.使⽤vue的懒加载
但是官⽹有⼀句
如果您使⽤的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。这个插件依赖于6.x.babel 需要注意
3.服务器和前端配置开启压缩
服务器nginx配置添加:
gzip on;
gzip_static on;  --这个很重要不加的话访问加载的还是未压缩的⽂件
前端配置config/index.js：
productionGzip: true,
然后再引⼊插件 compression-webpack-plugin
需要注意版本  "compression-webpack-plugin": "^1.1.12",
前⾯两种⽂件⼤⼩并没有减少太多使⽤第三种的时候减少的最多以上为个⼈经验，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。