vue优化CDN加速的示例

代码敲出来后，项目上线，然后会遇到优化。

这个项目有抢购的性质。内容下载时间很长，加载很慢。至此，前端优化之旅开始了

项目根目录正在运行

构建/webpack.dev.conf.js中介绍了NPM安装web pack-bundle-analyzer-save-dev

常量包分析器插件=必需('网络包-包-分析器')。Bundle Analyzer Plugins :【新的Bundle Analyzer Plugin()】运行后，可以看到几个大js。下面是优化后的截图

像vue，vue路由器，vuex，axios，mint-ui，crypto-js

1.使用CDN资源

它的功能是：当我们加载页面时，我们需要将一些我们需要的依赖项加载到当前会话中，然后开始执行。如果我们启动屏幕，有很多模块，需要等待很长时间。浏览器内存最多可以执行40个进程，在加载之前的代码之前，不能执行下面的代码。如果我们用cdn引入一些第三方资源，可以缓解我们服务器的压力。原则是将我们的压力分配给其他服务器点。

cdn在index.html的引入

！DOCTYPE html html head meta charset=' utf-8 '脚本src=' http://cdn . bootcss.com/vue/2 . 5 . 2/vue . min . js '/脚本脚本src=' http://cdn . bootcss.com/vue-router/3 . 0 . 1/vue-router . min . js '/脚本脚本src=' 3358 cdn . bootcss.com/vuex/3 . 0 . 1/vuebuild文件将被自动注入-/body/html修改build/webpack.base.conf.js文件，并在外部扩展externals。通过这种方式，引入了依赖库，而不需要进行webpack处理。

该模块. exports={ 0.externals: {'vue' :' vue '，//左边的vue是我们自己介绍的时候用的，右边的是开发依赖库的所有者定义的，不能修改为' vue-router' :' vue router '，' vuex ' : ' vuex ' Axios ' : ' Axios '，' mint-ui' :' mint '，' crypto-js' :' cryptojs.} console.log(窗口)打印下图

有些材料是进口的，或者会不会引进。以mint-ui为例。发现的资料在main.js中介绍如下，但是mint-ui的组件经过注释后仍然可以正常使用。从‘vue-router’导入VueRouter也可以注释使用。感觉window全球都有VueRouter，但有一个问题是eslint会报告警告，所以没有标注。如果有错误，希望大家能指出我的错误

从' mint-ui'Vue.use(MINT)进口MINT

main.js

从' Vue' //导入Vue未被注释掉，因为Vue在main.js中的其他地方使用过。如果未使用，您可以从'中注释掉导入app。/app“从导入路由器”。/路由器“从导入存储”。/store' router/index.js。

//从' vue' /导入Vue/注释掉//Vue.use(VueRouter) //注释掉从' vue-router'/导入Vue路由器/使用我们自己定义的Vue-router const app router={ 0.}导出默认的新vue路由器(app router)商店/。

//从' vue' /导入Vue/注释掉//Vue.use(Vuex) //注释掉从' vuex' const store导入Vuex=new Vuex。商店({ 0.}) export default storecryptojs用于加密，在使用它的地方直接介绍。Axios也是如此

从“crypto-js”导入CryptoJS.优化前

优化后，

另一个是花一些钱来增加o()o的带宽

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。