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

演示地址:https://github.com/cag2050/vue_cli_optimize_static_resource

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

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

2.指数。html修改
　　

添加脚本引入

　　　　　　& lt;脚本src=" https://www.yisu.com/zixun/static/js/vue.min.js "祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/zixun/static/js/vue-router.min.js "祝辞& lt;/script> 　　　　

3。构建/webpack.base.conf修改。js文件:
　　

注释掉下面这行

　　　　　　解决:{ 　　扩展:['。js ', '。vue ', ' . json), 　　别名:{//皏ue美元”:“vue/dist/vue.esm.js”, 　　“@”:解决(“src”), 　　} 　　}, 　　之前　　　　

添加外部部分(和外部资源同级)。

　　　　　　外部:{ 　　“vue”:“vue”, 　　“vue-router”:“VueRouter” 　　}, 　　　　

优化后,速度对比
　　

　　　　　　　　优化前编译时长　　优化后编译时长　　优化前构建时长　　优化后构建时长　　　　　　　　　　300 ~ 400毫秒　　200 ms左右　　8435毫秒　　4332毫秒　　　　　　　　

优化前文件大小:
　　

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

优化后文件大小:
　　

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

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