分享：ThinkPHP和Webpack前後端結合建構SEO多頁應用的一個思路

有時候遇到的需求是這樣的：

部分頁面，如詳情頁，需要做SEO優化，而部分頁面需要實作複雜的互動，如使用者背景，可釋出資訊。

之前采用過一次，Nuxt.js 等前後端同構的方案。

優點就是一套js代碼，就可以實作後端渲染。

使用後發現開發環境性能要求較高，經常出現啟動慢，打包慢，有時候還程序自動退出

編寫代碼的時候發現，Vue生命周期把控不好，會出現一些奇怪的報錯，不能很好的區分代碼在服務端執行還是用戶端執行，需要寫一些判斷。

上圖的方案，采用了ThinkPHP作為服務端，使用他的Active Records 形式的 ORM 能夠很快進行MySQL資料庫的CURD開發，而且一台伺服器部署多個應用也比較簡單，通過PHP-FPM可以很好的管理PHP應用。當然也可以換成其他語言實作，例如：

• Python的Flask、Django;
• Node.js的express、Koa；
• Java的SpringBoot；
• PHP的Laravel等

通過Twig渲染模闆，主要是Twig模闆引擎比較通用，

類似的有

• PHP 生态下的 Twig
• Python生态下的 jinja2
• javascript生态下的nunjucks

甚至是Vue中也有其影子

有了Webpack的加持，乘着前端工具鍊的快車

• 不需要複雜互動的部分，就可以直接使用後端模闆引擎做後端渲染
• 需要做複雜互動的部分，可以使用Vue.js、React.js等前端庫來處理

開發環境

使用webpack devServer處理靜态檔案，同時又實作了Live Server，提升開發體驗

使用ThinkPHP處理HTML，通過模闆引擎Twig動态渲染模闆

生産環境

通過Nginx轉發請求，先将請求轉發給PHP處理模闆引擎，擷取THML檔案

浏覽器再去請求js、css、圖檔等靜态資源，打包後的檔案名可以增加hash值，解決浏覽器對靜态資源的緩存問題，通過manifest.json檔案的檔案映射關系，動态查找真實的檔案名，實作動态替換

檔案目錄結構，可以參考微信小程式的方案

app/
  index/
    IndexController.php
  src/
    pages/
      index/
        index.js
        index.less
        index.html