vue 优化CDN加速

fancyLuo 发布于2019-08-23 11:56 / 3045人阅读

摘要：代码敲完，项目上线，然后就要与优化相遇。同理优化之前优化之后另外就是花点钱提高了下带宽后面有其他优化再更新，很多东西是摸索理解的，仅供参考

代码敲完，项目上线，然后就要与优化相遇。

项目有抢购的性质content download 时间非常的长加载慢的很，至此开始前端优化之旅

项目根目录运行

npm install webpack-bundle-analyzer --save-dev

在build/webpack.dev.conf.js中引入

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
 plugins: [
    new BundleAnalyzerPlugin()
  ]

运行后显示可以看到几个大的js 下面是已经优化过后的截图
像vue ，vue-router，vuex，axios，mint-ui，crypto-js

1.使用CDN资源

使用cdn在index.html中引入

修改build/webpack.base.conf.js文件，externals外部扩展，通过这种方式引入依赖库，不需要webpack处理。

module.exports = {
  ...
  externals: {
    "vue": "Vue", // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改
    "vue-router": "VueRouter",
    "vuex": "Vuex",
    "axios": "axios",
    "mint-ui": "MINT",
    "crypto-js": "CryptoJS"
  }
  ...
}

console.log(window) 打印出下图

网上查了资料有的引入有的还是会引入有的没有引入，拿mint-ui举例，查到的资料在main.js有下面的引入，但是注释掉之后还是可以正常使用mint-ui的组件，import VueRouter from "vue-router" 也是可以注释掉使用的，感觉是因为window全局有了VueRouter,但是有个问题就是eslint会报警告，所以就没有注释掉。如果理解有误希望大家能指出我的错误

import MINT from "mint-ui"
Vue.use(MINT)

main.js

import Vue from "vue" // 没有注释掉是因为main.js其他地方用到了Vue,如果没有用到可以注释掉
import App from "./App"
import router from "./router"
import store from "./store"

router/index.js

// import Vue from "vue" // 注释掉
// Vue.use(VueRouter) // 注释掉
import VueRouter from "vue-router" // 文件中引入的时候用我们自己定义的vue-router
const appRouter = {
....
}
export default new VueRouter(appRouter)

store/index.js

// import Vue from "vue" // 注释掉
// Vue.use(Vuex) // 注释掉
import Vuex from "vuex"
const store = new Vuex.Store({
  ....
})
export default store

CryptoJS用来加密，在使用的地方直接引入。axios同理

import CryptoJS from "crypto-js"
.....

优化之前

优化之后

另外就是花点钱提高了下带宽o(╯□╰)o

后面有其他优化再更新，很多东西是摸索理解的，仅供参考~

GPU云服务器云服务器 vue的cdn加速优化回国线路cdn加速 cdn vue vue cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97719.html

WEB前端性能优化

摘要：页面渲染初始化盒子模型相关属性变化窗口事件触发结构变化，比如删除了某个节点获取某些属性，引发回流很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。使用框架出现了首屏性能渲染问题。请求过程中一些潜在的性能优化点深入理解http请求的过程是前端性能优化的核心！ dns是否可以通过缓存减少dns查询时间？网络请求的过程走最近的网络环境？相同的静态资源是否...

raoyi 2019-08-26 11:58 评论0 收藏0
vue项目优化--使用CDN和Gzip

摘要：使用构建的项目，在打包发布的时候，发现打包后的文件体积很大，使用分析后，发现占用空间最多的是引用的第三方依赖。具体实现以我个人项目为例我的项目中引入了以下模块。使用vue-cli构建的vue项目，在打包发布的时候，发现打包后的文件体积很大，使用webpack-bundle-analyzer分析后，发现占用空间最多的是引用的第三方依赖。第三方的依赖文件可以使用cdn外链的方式引入，这样...

番茄西红柿 2019-07-16 14:29 评论0 收藏0
vue项目优化--使用CDN和Gzip

摘要：使用构建的项目，在打包发布的时候，发现打包后的文件体积很大，使用分析后，发现占用空间最多的是引用的第三方依赖。具体实现以我个人项目为例我的项目中引入了以下模块。使用vue-cli构建的vue项目，在打包发布的时候，发现打包后的文件体积很大，使用webpack-bundle-analyzer分析后，发现占用空间最多的是引用的第三方依赖。第三方的依赖文件可以使用cdn外链的方式引入，这样...

Object 2019-06-21 16:10 评论0 收藏0
vue-cli3.0 资源加载的优化方案

摘要：更新今天反复试了，不用区分测试环境还是生产环境，统一都用就可以了背景之前自己搭建了一个的后台项目，坑很多，其中一个就是资源加载的方案，由于是后台项目，之前一直没放在心上，看到一些资源优化方案后，觉得有必要弄一下。 20180829 更新今天反复试了，不用区分测试环境还是生产环境，统一都用 cdn 就可以了背景之前自己搭建了一个 vue + tp5.1 的后台项目（https:...

yzzz 2019-08-23 11:33 评论0 收藏0