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，进一步探索项目秒开。