cdn加载vue很慢_Vue.js 项目打包优化实践
首先上结果:
- 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn;
- 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载速度。
- 添加了全局 loading 来提高体验。
不出意外core-js也可以改成CDN
配合静态资源的CDN加速,目前首页的速度大概是700ms,除了图片外加载的速度大概是200ms左右
abandon.workabandon.work
CDN 优化
CDN 优化是在 webpack 中实现的,主要分为环境切换,webpack 打包技巧和 html-webpack-plugin
配置三个部分。
这部分的代码可以点击这个链接
环境切换
通过process.env.NODE_ENV
来切换环境,因为在 dev 环境的时候,最好还是使用本地包,方便 debug 等,在生产环境的时候才需要添加 CDN.
本项目的vue.config.js
中就是这样安排的,这样就可以在不同环境对 webpack 进行配置,类似于vue-cli2
的配置类型:
# cli 2
webpack.dev.js
webpack.prod.js
本项目中;
if (process.env.NODE_ENV === 'production') {webpackConfig['chainWebpack'] = config => {config.plugin('html').tap(args => {args[0].cdn = cdn;return args;});};webpackConfig['configureWebpack'] = config => {config['externals'] = {vue: 'Vue',vuex: 'Vuex','vue-router': 'VueRouter',axios: 'axios',};config['plugins'].push(new BundleAnalyzerPlugin());};
}module.exports = webpackConfig;
具体操作涉及vue/cli3+
的配置,具体可以看这里;
对于configureWebpack
, 有配置式和函数式,当使用函数式的时候,添加插件的方法可以看上面的片段,这是官方文档里面没有的。
打包技巧
那么该怎么设置 cdn 呢?
这里需要两个 webpack 的配置项:
webpack.externals
webpack.plugins.html-webpack-plugin
具体也可以看代码,主要的思路就是在区分环境的基础上,在生产环境将需要 cdn 的包放在webpack.externals
里面:
webpackConfig['configureWebpack'] = config => {config['externals'] = {vue: 'Vue',vuex: 'Vuex','vue-router': 'VueRouter',axios: 'axios',};
};
接着就是操作 plugin,这里选择链式操作,将需要填入的 cdn 连接的内容传给index.html
模板:
let cdn = {js: [// 可以写成动态版本号'//cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js','//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js','//cdn.bootcss.com/vuex/3.1.2/vuex.min.js','//cdn.bootcss.com/axios/0.19.0/axios.min.js',],
};
webpackConfig['chainWebpack'] = config => {config.plugin('html').tap(args => {args[0].cdn = cdn;return args;});
};
html-plugin 配置
上述的配置完成之后,需要在public/inedx.html
中修改一下:
<div id="app"></div>
<% if(process.env.NODE_ENV==='production'){htmlWebpackPlugin.options.cdn.js.forEach(function(item){ if(item){ %>
<script type="text/javascript" src="<%= item %>"></script>
<% }})} %>
<!-- built files will be auto injected -->
这个的目的就是当是生产环境的时候,遍历生成 CDN 的元素。这是一个模板语法,可以看看html-webpack-plugin
参考文章
- webpack 使用 HtmlWebpackPlugin 进行 cdn 配置
- vue 打包优化
- 在 vue-cli 3.0 中根据不同环境动态注入 CDN
- webpack-cdn-plugin
- webpack4 配置的最佳实践
路由懒加载优化
这里主要是根据官方文档的实践:
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
// src/router/index.js
// 路由懒加载 博客分块
const Blog = () => import(/* webpackChunkName: "group-blog" */ '../views/Blog/Blog.vue');
const ContentPage = () => import(/* webpackChunkName: "group-blog" */ '../views/Blog/ContentPage.vue');
loading 插件
为了美化加载的过程,自定义一个Loading插件,主要参考了这些文章
选择了一个蛮炫酷的动效
功能:
- 单例模式
- 可以在axios拦截器中使用
写在最后
希望大家可以多多关注我的abandon.work,一个nest.js+mongoDB+Vue.js
的小站。
cdn加载vue很慢_Vue.js 项目打包优化实践相关推荐
- html5怎么改为vue_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
- vue 动态路由_Vue.js应用性能优化三
在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码.虽然按照路由拆分代码非常有用,但在用户访问我们的站点后,仍然有很多内部代码不需要.在本 ...
- vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析 一.Vue.js实例 在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
- 加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
- Vue SPA 打包优化实践
本文是继笔者上一篇文章<<Vue SPA 首屏加载优化实践>>基础上进一步优化的实践经验分享! 随着我们的项目的增长,打包会越来越慢.每次打包都会将第三方的js打包一遍,但是这 ...
- vue第一次加载慢怎么优化_vue如何优化首屏加载速度?面试过程遇到的性能优化问题...
问题:vue如何优化首屏加载速度? 问题描述: 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么 ...
- html引用单文件组件,webpack入坑之旅(五)加载vue单文件组件_html/css_WEB-ITnose
需要什么? 在经过前面的四个练习,相信已经对于 webapck有了一定的了解,现在我们就来一个综合案例,进一步甲申年对于 webpack的理解. 首先我们应该思考要解析 .vue类型的文件,需要什么样 ...
- Vite 配置 cdn 加载资源
一.介绍 上篇文章我们从零配置 Vite + Vue3.0 开发环境.生产环境,本篇文章我们配置 CDN 加载.因为 Vite 不会重写从外部文件导入的内容,我们需要使用支持 ESM 编译的 CDN. ...
- js控制css 加载,CSS样式表的加载对于DOM解析,渲染,JS执行的阻塞问题
CSS加载问题 css加载会不会阻塞DOM树的解析? css加载会不会阻塞DOM树的渲染? css加载会不会阻塞后面js语句的执行? css阻塞 h1 { color: red !important ...
最新文章
- 2022-2028年中国医疗+养老产业深度调研及投资前景预测报告
- 白盒测试各种“覆盖”间的拓扑关系及白盒用例常用要求
- 老大,我就想加个索引,怎么就这么难?
- modbus连续读取时数据不正确_使用MODBUS协议与传感器、工控屏对接时碰到的问题...
- 八、Java的可变参数例子
- 《Python黑客编程之极速入门》正式开课
- 微信公众号根据关键词取文章列表 API
- python分层抽样_抽样方法—分层抽样
- 计算机应用主要学PS,计算机应用专业PS模块考试标准.doc
- python pandas 数据透视表_python 用pandas实现数据透视表功能
- python爬虫爬取网易云音乐歌手信息
- html5作品欣赏,8个超棒的HTML5网站设计欣赏
- MUI极简的JS函数
- Android Studio(AS)连接mumu模拟器的方法
- 常州abb机器人编程_ABB机器人编程程序解析
- 1.3 练习: 画内存分析图
- C语言笔记例子 continue 用法
- C语言 1982年我国第三次人口普查,全国人口为10.3亿,假如人口增长率为5%。编写一个程序,求在公元多少年总人口翻了一番。
- 解决matlab 关于警告(warning)、错误(error)、异常(exception)与断言(assert)问题总结
- 环保行业舆情管理制度