vue-cli2.x项目优化之引入本地静态库文件的方法


Posted in Javascript onJune 19, 2018

demo地址:https://github.com/cag2050/vue_cli_optimize_static_resource

vue-cli 将静态资源文件放到 static 文件夹下并引用:

1.将 node_modules 下相应的 xxx.min.js,复制到项目 static 文件夹下

2.index.html 修改

添加script引入

<script src="static/js/vue.min.js"></script>
<script src="static/js/vue-router.min.js"></script>

3.修改 build/webpack.base.conf.js 文件:

注释掉下面这行

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   // 'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 },

添加externals部分(externals 和 resource 同级)。

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
  },

优化后,速度对比

优化前编译时长 优化后编译时长 优化前build时长 优化后build时长
300~400ms 200ms左右 8435ms 4332ms

优化前文件大小:

vue-cli2.x项目优化之引入本地静态库文件的方法

优化后文件大小:

vue-cli2.x项目优化之引入本地静态库文件的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
下拉框select的绑定示例
Sep 04 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
js操作数组函数实例小结
Dec 10 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
vue异步加载高德地图的实现
Jun 19 #Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 #Javascript
JS正则表达式常见用法实例详解
Jun 19 #Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 #Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 #Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 #Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 #Javascript
You might like
深入掌握include_once与require_once的区别
2013/06/17 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
js实现网页收藏功能
2015/12/17 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
公司开业庆典主持词
2014/03/21 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
幸福中国演讲稿
2014/09/12 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2015年暑期见闻
2015/07/14 职场文书
研讨会致辞
2015/07/31 职场文书
高中军训感想
2015/08/07 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL