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，進一步探索項目秒開。