美文网首页web前端收藏
解决vue生产环境app.js文件过大问题

解决vue生产环境app.js文件过大问题

作者: 摇了摇头oO | 来源:发表于2018-07-01 22:45 被阅读0次

一、 效果

从3.7M降到了现在的105KB image.png

二、方案

  1. 去掉多余的库
    将不必要的库卸载掉 npm uninstall xxx

    举个例子:例如moment库文件是很大的,在前端可以用js的 new Date实现获取日期,或者可以其他库代替,也可以将moment库放在服务端用,将所有关于时间的处理放到服务端进行。 image.png
  2. 路由懒加载

    将下图中的1改为2,详细可以百度搜索 vue路由懒加载 image.png
  3. 开启服务端gzip压缩
    我这里用的是nginx,所以下找到nginx配置文件:
    vi /etc/nginx/nginx.conf
    跟着下图一样开放nginx的gzip配置:

    image.png
  4. 压缩js文件
    用webpack.optimize.UglifyJsPlugin可以压缩js文件

    image.png
  1. 提取第三方库
    暂时没有使用此方案

  2. 将文件放到cdn上
    在项目根目录index.html使用cdn节点导入

<div id="app"></div>
<!-- 先引入 Vue -->
<!--开发环境-->
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<!--生产环境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>-->
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.4.10/index.js"></script>

相关文章

网友评论

    本文标题:解决vue生产环境app.js文件过大问题

    本文链接:https://www.haomeiwen.com/subject/luihuftx.html