解决vue-cli脚手架打包后vendor文件过大的问题


Posted in Javascript onSeptember 27, 2018

大家会遇到打包后文件很大,导致页面初始化加载的速度很慢。会出现白屏的现象。这一般是你打包的vendor太大的缘故。如果你打包后看到你的vendor文件有700kb以上。你就要考虑怎么处理。

处理这种文件的

1、把不常改变的库放到index.html中,通过cdn引入,比如下面这样:

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
 <script src="https://unpkg.com/mint-ui@2.2.13/lib/index.js"></script>
 <script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
 <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>

然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码

externals:{
 'vue':'Vue',
 'element-ui':'ELEMENT',
 'mint-ui':'MINT',
 'axios':'axios',
 'vue-router':'VueRouter',
 },

2、通过路由的懒加载

export default new VueRouter({//这个为什么用VueRouter 是通过script标签引入的
 mode: 'history',
 routes: [
 {
  path: '/',
  redirect: '/master/closestore/today'
 },

 {
  path: '/master/closestore/today',
  name: 'CloseingCount',
   component: resolve => require(['@/components/ClosingCount'], resolve)
 },
 ]});

以上这篇解决vue-cli脚手架打包后vendor文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
如何用JavaScipt测网速
May 09 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 #Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 #Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 #Javascript
vue-cli的工程模板与构建工具详解
Sep 27 #Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 #Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 #Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 #Javascript
You might like
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python全栈之列表数据类型详解
2019/10/01 Python
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
明星邀请函
2015/02/02 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
五年级作文之想象作文
2019/10/30 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang