Vue Production Deployment By Laravel-Mix

Vue Production Deployment By Laravel-Mix

今天來分享一下如何透過Laravel-MIX來部屬Vue 的Production版本。Vue production deployment 主要是參照Vue官網提供的建議

可以先說結論:Laravel-MIX都幫你處理好了,只是要對設定參數做增減即可。(Jeffery Way 真是太神啦!)

如果不知道Laravel-Mix的人可以先上一下Laravel 官網,簡單來說,Laravel-Mix是一個封裝過的webpack,他可以幫你處理前端套件的一些功能,例如壓縮,版本號…等等,並附帶一些常用的設定。如果你是Laravel 5.3版以前,你用的是Laravel-Elixir,Elixir用的是Gulp,而非Webpack,所以本篇可能就會不符您的需求,可能要請您升到5.4版才可以使用。以下就直接進入正題囉!

根據Vue官網的建議,請進行以下步驟:

Turn on Production Mode

Vue 預設下是使用Develop mode,所以會出現一些 warnings 及errors,但是這些東西當然不能再production 被看到,所以我們要切換成Production mode 去避免此問題。

  • Without Build Tools

如果你是直接用script tag 去指定路徑,請使用vue.min.js的版本即可。

  • With Build Tools

如果你用的是webpack 或是 Browserify,production mode 應該都已經被設置好了,當然我們用的Laravel-Mix也是被設置好的。你可以打開Laravel 內的package.jsonscript

{
//...
"scripts": {
//...
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
//...
}
}

你要注意的是就是在部屬時,記得切換到資料夾內,下npm run prod,他一切都會幫你處理好囉!

Pre-Compiling-Templates

Vue的編寫方式很多元,你可以使用DOM內模版(在html內使用template)或是in-JavaScript template(在vue.component內定義template)這兩種方式編輯後,在運行時需要透過模版文件轉換為渲染函數,通常這個過程已經很快了,不過你可以透過vue-template-loader在構建過程先把模版文件轉換為渲染函數(template-to-render-function) 。

不過我們可以用更快的方式處理-用單文件組件(Single-File Component)。單文件組件已經包含編譯出來的資料,而不是原始的模版字串。(the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.)

由於Laravel-Mix也包含了Vue-loader,為了有更好的效能,建議大家開發都用單文件組件來開發吧!

Extracting-Component-CSS

當你使用單文件組件來開發時,通常個文件都有自己的css(<style>) ,這會造成細微的運行開銷(small runtime cost),如果你有使用server-side rendering,則會導致flash of unstyle content(白話文就是短暫的無CSS效果畫面。),所以我們應該在構建時先把CSS個別抓出。

根據不同的處理套件,官網提出不同的解決方法,我們先關注在webpack處理(另外有BrowserifyRollup的處理方法。)。

官方是使用extract-text-webpack-plugin套件處理CSS問題。再來我們看看 Laravel-Mix的作法,可以發現我們可以在webpack.mix.js內設定extractVueStyles,而預設是false

{
//...
// mix.options({
// extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
//...
});
}

接著我們追蹤一下程式碼可以發現Laravel-Mix 也有引入extract-text-webpack-plugin,而且你也可以發現,他的作法跟官方推薦的作法相同。所以我們只要在 webpack.mix.js 大方引入即可

if (mix.inProduction()) {
mix.options({
extractVueStyles: true
});
}

並記得在部屬時下npm run prod。你可以在app.css內(如果你沒改變預設值的話)看到差異。當為true 時會加入&lt;style&gt;的內容,為false的話則會消失。

Tracking Runtime Errors

最後一個跟性能提昇無關,是個不錯的錯誤追蹤應用。Laravel-Mix並無此項目的相關運用。

Vue在組件渲染時若出現運行的錯誤,錯誤訊息會被傳遞到全域的Vue.config.errorHandler的函式(如果有被設置)。可以透過設置Sentry去配合這個hook做錯誤追蹤服務,官方提供了Vue的集合