vue项目优化--服务端渲染优化
接上篇 vue项目优化--使用CDN和Gzip
为了项目能被爬虫抓取,我选择了vue服务端渲染。照着官方的文档撸了一遍,发现打包的文件依旧很大,使用webpack-bundle-analyzer
分析了一波,发现最占体积的依旧是第三方依赖,想向之前的一样,使用cdn来解决,发现编译报错,目前仍没有解决办法(欢迎知道服务端渲染如何使用cdn的大牛留言指教)。
未优化前文件大小,主要是各种语言包占体积
使用普通解决方案解决hightlight.js 和moment.js
//hightlight.js //js文件中 import hljs from 'highlight.js/lib/highlight'; ['javascript', 'bash', 'xml', 'css', 'markdown'].forEach((langName) => { let langModule = require(`highlight.js/lib/languages/${langName}`); hljs.registerLanguage(langName, langModule); }); Vue.directive('highlightjs', function(el) { let blocks = el.querySelectorAll('pre code'); Array.prototype.forEach.call(blocks, hljs.highlightBlock); })
//webpack文件中 // plugins中加入 new webpack.ContextReplacementPlugin(/highlight\.js\/lib\/languages$/, new RegExp(`^./(${['javascript', 'bash', 'xml', 'css', 'markdown'].join('|')})$`))
//js文件中 import moment from 'moment' moment.locale('zh-cn'); //webpack中 new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
经过gzip压缩后,在浏览器中的效果
基本能做到秒开,但比cdn加载还是慢了很多,下一步打算尝试nuxt.js,进一步探索项目秒开。
相关推荐
gloria0 2020-10-26
gloria0 2020-08-09
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13