解决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 相关文章推荐
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
vue实现固定位置显示功能
May 30 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
WebPack工具运行原理及入门教程
Dec 02 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 REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
php实现的http请求封装示例
2016/11/08 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JS上传前预览图片实例
2013/03/25 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jquery自定义表格样式
2015/11/23 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
JavaScript常用数学函数用法示例
2018/05/14 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python网络编程 Python套接字编程
2017/09/13 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Python程序控制语句用法实例分析
2020/01/14 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
新三好学生主要事迹
2014/01/23 职场文书
开平碉楼导游词
2015/02/06 职场文书
大学生实习证明
2015/06/16 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python