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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
详解js类型判断
2018/05/22 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
Python的Django框架中的数据库配置指南
2015/07/17 Python
python更新列表的方法
2015/07/28 Python
解析Python中while true的使用
2015/10/13 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python中return self的用法详解
2018/07/27 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python__name__原理及用法详解
2019/11/02 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
创业资金计划书
2014/02/06 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
入党积极分子个人总结
2015/03/02 职场文书
大专护理专业自荐信
2015/03/25 职场文书
团委工作总结2015
2015/04/02 职场文书
导游词之无锡古运河
2019/11/14 职场文书
python使用torch随机初始化参数
2022/03/22 Python