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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
jquery延迟对象解析
Oct 26 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
简单了解Vue computed属性及watch区别
Jul 10 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
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
python中类的一些方法分析
2014/09/25 Python
在Python中使用HTML模版的教程
2015/04/29 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
利用Python检测URL状态
2019/07/31 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
浅谈Python3中print函数的换行
2020/08/05 Python
python FTP编程基础入门
2021/02/27 Python
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
教师自我鉴定范文
2013/11/10 职场文书
小学防溺水制度
2014/01/29 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
合作合同协议书
2016/03/21 职场文书