基于vue-cli npm run build之后vendor.js文件过大的解决方法


Posted in Javascript onSeptember 27, 2018

问题

vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题。

解决方案

像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中。

1.在项目根目录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>

2.项目根目录下build/webpack.base.config.js中添加externals

externals: {
 vue: 'Vue',
 'element': 'element-ui',
 'axios':'axios',
 },

3.mian.js中import ... from ...就可以去掉了,若没去掉webpack还是会把对应的依赖进行打包。

2018.01.27补充

在项目config/index.js中可以开启gzip压缩,对打包优化也有很大的帮助

1.首先安装插件 compression-webpack-plugin

cnpm install --save-dev compression-webpack-plugin

2.设置productionGzip: true

// Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: true,
 productionGzipExtensions: ['js', 'css'],

 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report

3.npm run build执行后会发现每个js和css文件会压缩一个gz后缀的文件夹,浏览器如果支持g-zip 会自动查找有没有gz文件 找到了就加载gz然后本地解压 执行。

以上这篇基于vue-cli npm run build之后vendor.js文件过大的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
js创建对象的方式总结
Jan 10 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 #Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 #Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 #Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 #Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 #Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 #Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 #Javascript
You might like
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
微信小程序自定义底部弹出框
2020/11/16 Javascript
three.js实现圆柱体
2018/12/30 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
实习求职信
2013/12/01 职场文书
音乐节策划方案
2014/06/09 职场文书
改革共识倡议书
2014/08/29 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
学校少先队工作总结
2015/08/12 职场文书
详解Python描述符的工作原理
2021/06/11 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android