vue性能优化2--引入cdn
当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且。浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代码,如果我们采用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。这个功能主要是用在创建一个库的时候用的
vue性能优化2--引入cdn的更多相关文章
- Vue性能优化
今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人 ...
- 前端vue性能优化
一:代码层次优化 1.1.v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建:也是惰性的:如果在初始渲染时 ...
- Vue性能优化之组件按需加载(以及一些常见的性能优化方法)
关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...
- 浅谈vue性能优化
基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...
- VUE性能优化总结
1.v-show,v-if 用哪个? 在我来看要分两个维度去思考问题: 第一个维度是权限问题,只要涉及到权限相关的展示无疑要用 v-if, 第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的 ...
- vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- 对vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- Vue 性能优化track-by
Vue 是一个MVVM框架 所谓mvvm就是model-->view,view-->model. vue帮助我们实现了自动绑定.省点我们用JQUERY,zpeto 去操作dom的麻烦. 主 ...
- vue性能优化1--懒加载
懒加载也叫延迟加载,即在需要的时候进行加载.随用随载.为什么需要懒加载?像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间 ...
随机推荐
- CF 455A Boredom
A. Boredom time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- fs-extra 文件管理
一.fs-extra 文件管理 $npm install fs-extra --save 1.创建一个目录 fs.mkdir(path, [mode], [callback(err)]) path 将 ...
- Windows平台编译memcached 1.2.6
两个项目libevent.memcached,Platform Toolset使用Visual Studio 2013 - Windows XP (v120_xp).在编译memcached时会提示& ...
- Mysql 忘记 root密码解决
1 stop mysql Ubuntu/Debian: sudo /etc/init.d/mysql stop CentOs: sudo /etc/init.d/mysqld stop 2 启动saf ...
- maven 使用-P指定环境打包,linux移动配置文件失败,windows成功!
问题描述: windows机器使用-P指定环境打包,最后组装文件组装成功,配置文件成功移动,linux下却只移动了jar包. windows: linux: ...
- python pytest测试框架介绍四----pytest-html插件html带错误截图及失败重测机制
一.html报告错误截图 这次介绍pytest第三方插件pytest-html 这里不介绍怎么使用,因为怎么使用网上已经很多了,这里给个地址给大家参考,pytest-html生成html报告 今天在这 ...
- Django---简单from表单提交
表单提交可能会报错,注意一行代码就可以解决: 简单配置路由: 简单表单提交: <form action="/index/" method="post"&g ...
- iOS ViewControllers 瘦身
https://objccn.io/issue-1-1/ https://juejin.im/user/57ddfba4128fe10064cbb93a 把 Data Source 和其他 Proto ...
- tkinter 提示符
在python3.4中,原来的tkMessageBox变成tkinter.messagebox,使用方式如下: import tkinter.messagebox tkinter.messagebox ...
- Oracle管理监控之linux下wendba登录设置
[root@localhost ~]# su - oracle [oracle@localhost ~]$ which jar/usr/bin/jar [oracle@localhost ~]$ ex ...