vue-cli 2.x 项目优化之:引入本地静态库文件
vue-cli 将静态资源文件放到 static 文件夹下并引用:
- 将 node_modules 下相应的 xxx.min.js,复制到项目 static 文件夹下
- index.html 修改
添加script引入
<script src="static/js/vue.min.js"></script>
<script src="static/js/vue-router.min.js"></script>
- 修改 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 2.x 项目优化之:引入本地静态库文件的更多相关文章
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- vue-cli 项目优化之3种方法对比:本地静态库资源(推荐)、cdn、DllPlugin
vue-cli 项目优化之3种方法对比:本地静态库资源(推荐).cdn.DllPlugin 事项 本地静态库资源 cdn DllPlugin 依赖 依赖cdn网站资源(有种完善方法:如果cdn引入不成 ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- vue单页面应用项目优化总结(转载)
转载自:https://blog.csdn.net/qq_42221334/article/details/81907901这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理 ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
- Pycharm初始创建项目和环境搭建(解决aconda库文件引入不全等问题)
1.新建工程 1.选择新建一个Pure Python项目,新建项目路径可以在Location处选择. 2.Project Interpreter部分是选择新建项目所依赖的python库,第一个选项会在 ...
随机推荐
- ob_gzhandler — ob_start callback function to gzip output buffer
<?php ob_start("ob_gzhandler"); ?><html><body><p>This should be a ...
- 一种基于SDR实现的被动GSM嗅探
软件定义无线电(SDR)是一种无线电通信系统,简单来说,就是通过数字信号处理技术在通用可编程数字信号处理硬件平台上,利用软件定义来实现无线电台的各单元功能,从而对无线电信号进行调制.解调.测量.SDR ...
- python day14--内置函数二
主要内容: 1.lamda匿名函数 2.sorted() 3.filter() 4.map() 5.递归函数 一.Lamda匿名函数 语法:lamda:参数:返回值 # 计算n的n次⽅方 def fu ...
- 运行和管理Rabbit
节点描述的是一个Erlang节点运行着一个Erlang应用程序.Erlang虚拟机的每个实例我们称之为节点.多个Erlang应用程序可以运行在同一个节点之上.节点之间可以进行本地通信.在RabbitM ...
- linux 如何使用密钥登录 (CentOs)
说明:一般的密码方式登录容易被密码暴力破解.所以一般我们会将 SSH 的端口设置为默认22以外的端口,或者禁用root账户登录.其实可以通过密钥登录这种方式来更好地保证安全. 密钥形式登录的原理是:利 ...
- 安卓 dex 通用脱壳技术研究(一)
注:以下4篇博文中,部分图片引用自DexHunter作者zyqqyz在slide.pptx中的图片,版本归原作者所有: 0x01 背景介绍 安卓 APP 的保护一般分为下列几个方面: JAVA/C代码 ...
- Putty CentOS SSH 总是自动断开连接
/********************************************************************** * Putty CentOS SSH 总是自动断开连接 ...
- tomcat服务器安装方法
tomcat: 链接:https://pan.baidu.com/s/1pMEu0hP 密码:g0ah (tomcat7) jdk :链接:https://pan.baidu.com/s/1 ...
- Javascript中的Bind,Call和Apply
http://www.html-js.com/article/JavaScript-functional-programming-in-Javascript-Bind-Call-and-Apply?s ...
- (21)模型层 -ORM之msql 聚合查询,F和Q(与、或、非查询)、分组查询
什么是聚合查询,就是使用聚合函数做计算 from django.db.models import Count,Avg,Max,Min #聚合函数要从模块中导入 from django.db.mod ...