ES6語法和webpack壓縮實例分析

本文小編為大家詳細介紹“ES6語法和webpack壓縮實例分析”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“ES6語法和webpack壓縮實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

首先介紹下在本文出現(xiàn)的幾個比較重要的概念：

函數(shù)計算（Function Compute）: 函數(shù)計算是一個事件驅(qū)動的服務(wù)，通過函數(shù)計算，用戶無需管理服務(wù)器等運行情況，只需編寫代碼并上傳。函數(shù)計算準備計算資源，并以彈性伸縮的方式運行用戶代碼，而用戶只需根據(jù)實際代碼運行所消耗的資源進行付費。函數(shù)計算更多信息 參考。
Fun: Fun 是一個用于支持 Serverless 應(yīng)用部署的工具，能幫助您便捷地管理函數(shù)計算、API 網(wǎng)關(guān)、日志服務(wù)等資源。它通過一個資源配置文件（template.yml），協(xié)助您進行開發(fā)、構(gòu)建、部署操作。Fun 的更多文檔 參考。
2.0 版本的 Fun，在部署這一塊做了很多努力，并提供了比較完善的功能，能夠做到將云資源方便、平滑地部署到云端。但該版本，在本地開發(fā)上的體驗，還有較多的工作要做。于是，我們決定推出 Fun Init 彌補這一處短板。
Fun Init: Fun Init 作為 Fun 的一個子命令存在，只要 Fun 的版本大于等于 2.7.0，即可以直接通過 fun init 命令使用。Fun Init 工具可以根據(jù)指定的模板快速的創(chuàng)建函數(shù)計算應(yīng)用，快速體驗和開發(fā)函數(shù)計算相關(guān)業(yè)務(wù)。官方會提供常用的模板，用戶也可以自定自己的模板。

背景

當我們寫 nodejs 函數(shù)時，函數(shù)往往會依賴很多第三方依賴，這樣導致函數(shù)代碼少則幾十兆，多則上百兆。代碼包太大，會有如下問題：

1. 可能會導致沒法成功上傳代碼到函數(shù)計算服務(wù)，因為函數(shù)計算服務(wù)對代碼包大小是有限制的，壓縮后最大不能超過 50 MB，解壓后最大不能超過 250 MB

2. 會導致冷啟動時間是變大，因為下載代碼的過程變大了

3. 每次更新代碼時間變大

另外，函數(shù)計算目前只支持 nodejs8 和 nodejs6 這兩個版本，這兩版本不支持 es6 語法，但是我們可能已經(jīng)寫習慣了 es6 語法該怎么辦呢？

熟悉 nodejs 的同學應(yīng)該知道，項目工程化管理工具 webpack，我們完全可以通過 webpack 將 es6 代碼編譯成 es5，并且剪切打包壓縮成一個 js 文件，然后將該 js 文件上傳到函數(shù)計算中運行。

快速開始

我這里提供了一個 fun 模板，幫助快速搭建一個函數(shù)計算 nodejs 項目骨架，支持 es6 代碼編譯成 es5，并且剪切打包壓縮成一個 js 文件，然后將該 js 文件上傳到函數(shù)計算中運行。操作作步驟如下：

1. 安裝 node

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
nvm install 8

2. 安裝 fun 工具

npm install @alicloud/fun -g

fun 工具的某些子命令可能會用到 docker，所以你需要安裝好 docker，具體參考文檔：Fun 安裝教程。

3. 通過 fun 模板生成項目骨架

fun init -n demo https://github.com/muxiangqiu/fc-skeleton-nodejs8.git

項目生成好后，在根目錄下有個 README.md 文件，閱讀該文件可以幫你快速了解項目骨架為你做了什么，以及相關(guān)的命令。具體詳情：README.md。

4. 安裝依賴

cd demo # 切換到項目根下面，后面的所有命令，都是在項目根下面執(zhí)行
npm install

注意：有少數(shù)特殊 npm 模塊的安裝可能會依賴當前系統(tǒng)環(huán)境，為了能正確安裝函數(shù)運行時的系統(tǒng)環(huán)境的 npm 模塊，可以通過 fun install 命令來實現(xiàn)，比如 puppeteer，具體參考：開發(fā)函數(shù)計算的正確姿勢 —— 安裝第三方依賴。

5. 編譯

# 生產(chǎn)編譯
npm run build
# 開發(fā)編譯（這種編譯方式不會進行代碼混淆，并且生成 source map 信息，方便開發(fā)調(diào)試）
npm run dev

6. 本地運行函數(shù)

fun local invoke demo/demo

7. 運行調(diào)試函數(shù)

運行調(diào)試之前，請先用 npm run dev  命令編譯源碼，然后以調(diào)試的方式運行函數(shù)：

fun local invoke -d 3000 demo

程序會提示你輸入函數(shù)的 event，如果你不需要輸入，可以按 ctrl+d 跳過輸入，接下來，并不會繼續(xù)往下執(zhí)行，只有 vs code 的連接上來后，程序才會繼續(xù)執(zhí)行。如何通過 vs code 連上來，并開始調(diào)試呢？如下圖所示：

8. 部署函數(shù)到云端

部署函數(shù)的時候需要用到 AK 等下信息，可以通過 fun config 來配置，如果配置過請忽略，部署函數(shù)命令如下：

fun deploy

讀到這里，這篇“ES6語法和webpack壓縮實例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。