vue项目优化--服务端渲染优化

接上篇 vue项目优化--使用CDN和Gzip

为了项目能被爬虫抓取,我选择了vue服务端渲染。照着官方的文档撸了一遍,发现打包的文件依旧很大,使用webpack-bundle-analyzer
分析了一波,发现最占体积的依旧是第三方依赖,想向之前的一样,使用cdn来解决,发现编译报错,目前仍没有解决办法(欢迎知道服务端渲染如何使用cdn的大牛留言指教)。

未优化前文件大小,主要是各种语言包占体积

vue项目优化--服务端渲染优化

使用普通解决方案解决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压缩后,在浏览器中的效果

vue项目优化--服务端渲染优化

基本能做到秒开,但比cdn加载还是慢了很多,下一步打算尝试nuxt.js,进一步探索项目秒开。

相关推荐