vue性能优化2--引入cdn
2024-08-24 09:01:34
当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且。浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代码,如果我们采用cdn的方式来引入一些第三方资源,就可以缓解我们服务器的压力,原理是将我们的压力分给其他服务器点。
配置
首页引入这些cdn,index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<title>mytest</title>
</head>
<body>
<noscript>
<strong>We're sorry but mytest doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
然后在vue.config.js添加webpack的externals属性即可
module.exports = {
baseUrl:'./',
configureWebpack: {
//使用cdn,不想让webpack打包进去
externals: {
"vue": "Vue",
"vue-router": "VueRouter"
}
},
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
}
}
效果
按照官方文档的解释,如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的
最新文章
- WPF中监视DependencyProperty的变化
- 不写完不让回家的JQuery的事件与动画
- 【网络】IP地址格式转换(htonl、ntohl;inet_addr、inet_ntoa)
- input的placeholder文字颜色修改
- Exceptionless 本地部署
- 初试 uTenux
- 安装php5.5
- google gflags使用.
- mybatis+spring+struts2框架整合
- Facebook Hacker Cup 2015 Round 1--Corporate Gifting(树动态规划)
- SUSE Linux Enterprise Server 11 SP1安装图解教程
- 【JS】jquery通知插件toastr
- Nand Flash驱动(实现初始化以及读操作)
- 浅谈 R_S触发器
- AJAX请求返回HTTP 400 错误 - 请求无效 (Bad request)
- dtruss
- 五、git创建及合并分支
- IAR编译器
- 第五章 Inheritance继承
- hive中解决中文乱码