vue-cli2.x项目优化之引入本地静态库文件的方法
2018-06-19 14:36
1691 查看
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-cli构建项目在index.html中使用静态文件
- Vue-cli项目获取本地json文件数据的实例
- vue-cli搭建的项目引入.css文件报错
- vue-cli项目修改文件热重载失效的解决方法
- 利用vue-cli创建新项目和引入Bootstrap的方法
- Vue-cli项目获取本地json文件数据
- Vue项目中引入外部文件的方法(css、js、less)
- vue完成项目后,打包成静态文件的方法
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- 比较好的前端方法库及一些vue如何引入静态文件
- (vue.js)vue-cli构建,scss文件引入本地css意外报错
- webpack+vue-cli项目中引入外部非模块格式js的方法
- vue项目中引入外部css以及js文件的方法
- vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
- vue-cli项目优化方法- 缩短首屏加载时间
- C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理
- 使用vue-cli搭建项目的使用,需要引入font-icon文件,报错的解决办法
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)
- Vue-cli单文件组件引入less、sass、css样式的不同方法
- 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法