vue静态资源cdn部署,通过cdn引入vue组件

　　外部库文件，可以使用cdn资源，或者其他服务器资源等。下面文章主要介绍Vue如何利用CDN加载资源加速打包的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。

为什么使用CDN

　　当Vue项目被打包时，默认情况下，所有代码将被合并以产生新的文件，包括各种库，从而产生一个大的包。如果使用cdn，会更有利于程序的加载速度。

　　在Vue项目中，所有引入到项目中的js和css文件在编译时都会打包成vendor.js，浏览器在文件加载后才能开始显示首屏。如果引入很多库，vendor.js文件的体积会相当大，影响第一次打开体验。

解决方法

　　将引用的外部js和css文件剥离，不编译成vendor.js，而是以资源的形式引用，这样浏览器就可以使用多线程异步加载vendor.js和外部js，从而达到加快打开的目的。

　　外部库文件，可以使用CDN资源，或者其他服务器资源等。

使用CDN主要解决两个问题

　　打包时间太长，打包的代码大小太大，服务器网络慢带宽不高。使用cdn可以避免服务器带宽的问题。

具体步骤

　　接下来以vue、vuex、vue-router的介绍为例说明处理流程。

资源引入

　　1.通过index.html项目根目录下的cdn节点导入。

　　身体

　　div id=app/div

　　！-生成的文件将被自动注入-

　　！-开发环境-

　　script src= https://cdn . bootcss . com/vue/2 . 6 . 11/vue . js /script

　　！-生产环境-

　　！-script src= https://cdn . bootcss . com/vue/2 . 6 . 11/vue . min . js /script-

　　！-介绍组件库-

　　script src= https://cdn . bootcss . com/vue-router/3 . 2 . 0/vue-router . min . js /script

　　script src= https://cdn . bootcss . com/axios/0 . 23 . 0/axios . min . js /script

　　script src= https://cdn . bootcss . com/element-ui/2 . 15 . 6/index . js /script

　　script src= https://cdn . bootcdn . net/Ajax/libs/moment . js/2 . 29 . 1/moment . min . js /script

　　/body

　　2.向vue.config.js添加外部扩展名

　　configureWebpack: {

　　外部：{

　　vue: Vue ，

　　“vue路由器”:“vue路由器”，

　　axios: axios ，

　　“时刻”:“时刻”，

　　元素-ui :元素，

　　}

　　以下是对外部配置选项作用的解释：

　　我们想引用一个库，但是不希望webpack被打包，也不影响我们在程序中被CMD，AMD，或者window/global使用，所以可以配置externals。

　　注意坑配置：ELEMENT-ui要大写为ELEMENT。

　　3.删除原始报价。

　　如果原始导入没有被删除，项目仍然会从node_modules引入资源。

　　也就是说，如果不删除，npm运行build时引用的资源还是会打包在一起，生成的文件会大很多。所以我觉得还是删了比较好。

打包对比

　　node_modules中介绍模块：可以看到元素和矩占了很大比重。

　　CDN介绍模块：

　　可以看到vendor.js文件大大缩减，打包速度快了很多。

　　问题集vue-cli 4使用报告来分析vendor.js

　　E CLI (@/vue/CLI)自带webpack包卷优化工具，可以检查每个模块的大小，方便优化。只需在构建后添加- report参数。

　　1.我们将该命令配置到package.json中

　　脚本:{

　　serve: vue-cli-service serve ，

　　build : vue-CLI-服务版本，

　　报告: vue-CLI-服务构建-报告//加入此行

　　执行npm运行报告包并生成报告。

　　注意：网上很多人说需要先安装webpack-bundle-analyzer包，其实不需要安装。

　　2.运行npm运行报告后，在构建的同时会在dist目录下生成一个report.html，打开后可以看到每个文件的占用大小。

附：vue项目常用的cdn地址

　　1.axios

　　https://cdn.bootcss.com/axios/0.18.0/axios.min.js

　　2.swiper

　　339 UNP kg。com/swiper @ 5。3 .8/CSS/swiper。CSS 339 UNP kg。com/swiper @ 5。3 .8/js/swiper。js 339 cdn。jsdelivr。net/NPM/view-awesome-swiper/dist/view-awesome-swiper。js脚本type=" text/JavaScript "

　　视图，使用vueawesomeswiper

　　/脚本

　　3.vue-router美元

　　339 cdn。bootcss。com/vista路由器/3 .0 .2/vista路由器。min.js

　　4.echarts美元

　　339 cdn。jsdelivr。net/NPM/埃哈特/dist/埃哈特。量滴js 339 cdn。jsdelivr。net/NPM/echart-GL/dist/echart-GL。量滴js 339 cdn。jsdelivr。net/NPM/echart/dist/extension/data tool。量滴js 339 cdn。net/NPM/echart/map/js/world。js010-5900

　　339 unpkg。com/element-ui/lib/index。射流研究…

　　5.element-ui美元

　　视图2:

　　339 cdn。jsdelivr。net/NPM/view @ 2。6 .11/距离/视角。量滴jsview 3:

　　339 unpkg。com/view @ 3。2 .31/距离/视角。全球。js010-5900

　　339 cdn。net/NPM/vant @ next/lib/index。CSS 339 cdn。net/NPM/vant @ next/lib/vant。量滴js010-5900

　　339 unpkg。com/vuex @ next

　　6.vue美元

　　339 cdn。net/NPM/moment @ 2。29 .1/时刻。量滴js 339 cdn。jsdelivr。net/NPM/moment @ 2。29 .1/区域设置/zh-cn。js010-5900

　　339 cdn。jsdelivr。网络/NPM/蚂蚁设计视图@ 1 .7 .2/距离/距离。量滴CSS 339 cdn。jsdelivr。网络/NPM/蚂蚁设计视图@1.7.2/dist/antd.min.js

总结

　　到此这篇关于视图(视图)如何使用基民盟加载资源加快打包速度的文章就介绍到这了，更多相关视图(视图)使用基民盟加载资源内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录