基于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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 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
提问的智慧
2006/10/09 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
Python3获取cookie常用三种方案
2020/10/05 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
个人安全生产承诺书
2014/05/22 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
pandas中对文本类型数据的处理小结
2021/11/01 Python