背景
uni-app 發佈以來，已經服務了幾十萬開發者。讓我們意外，或者說驚喜的是，有大量開發者用 uni-app 只編寫H5版，並沒有多端發佈（可參考 案例 ）。
這其實也符合 uni-app 的初衷， uni-app 的定位並不是需要多端發佈時才用 uni-app 。 uni-app 是一個使用 vue.js 開發所有前端應用的統一框架。對於一個前端工程師來說，使用 uni-app 做多端效率更高，做單一端也沒問題，並在各端有不少出彩的地方。
過去的版本迭代中， uni-app 已經成為了更好的小程序開發框架，比使用原生微信開發更有優勢。（見 評測 ）
在 uni-app 2.2的新版中，我們大幅優化了H5版的性能，讓使用 uni-app 開發的H5，性能體驗和直接使用 vue.js 開發H5拉齊。
可能不少開發者有某種誤解：多端框架要適配多端，所以性能肯定不如原生。我們想糾正一下：
- 切忌想當然，多看數據評測。還不信就自己動手實驗
- 請問使用 vue.js 開發的web性能好，還是使用原生js開發web性能好？答案是：使用 vue.js框架。為什麼？因為它在底層會自動優化數據同步、虛擬dom，比大多數開發手動寫的代碼要更高效。同樣的，使用 uni-app 也如此，框架底層的優化處理比大多數開發者手動寫setdata或dom操作更高效。
- 多端適配很多是在編譯時做的，並不影響運行時的性能
優化難點
想優化H5端的性能，並不是一件容易的事。
“功能全面”和“小巧極速”，這是一對最難調和的冤家。
為了保障多端的一致性， uni-app 實現了一套小程序的H5版Runtime，支持各種小程序的組件、API、配置。所以 uni-app 的H5版擁有比其他框架更好的跨端一致性。
但這也造成了老版的 uni-app ，輸出H5端時，包體積過大（框架未壓縮前有500k，部署gzip後162k）。
這確實是一個非常大的runtime，包含了幾十個內置組件，數百個API。而且這些API仍然在快速增加中。
不能像其他框架一樣因為功能少，所以體積小。我們不會用功能換性能，我們需要更好的方案。
優化方法
uni-app 包含幾十個內置組件、數百個API，是個“大而全”的框架；但開發者在開發具體應用時，未必能使用到所有的組件及API。若能根據項目具體情況，刪掉沒用到的組件及API，保留對項目有用的組件及API，便可精簡框架、減少體積，這即是“搖樹優化”的思路。
搖樹優化（Tree-Shaking），顧名思義，搖晃樹幹，將枯死無用的枝條搖掉，僅保留有用的樹枝。對應到框架層面理解，就是一個框架的眾多組件和API，可以按需使用，把未引用的框架部分裁剪掉。Tree-Shaking 最早由 Rollup 提出，屬於 死碼刪除 的一種形式。
常見的前端框架搖樹，一般是基於明確的 import 引用關係。比如引用某UI庫時，在A頁面使用該UI庫的search組件，此時需要寫js代碼import這個search組件，那麼搖樹分析就很容易。
但 uni-app 和小程序一樣，內置組件和API是不需要import的，這提升了開發的易用性，但此時卻加大了搖樹的難度，依靠簡單的import分析無法實現搖樹了。
幸好對DCloud團隊而言，AST語法分析是看家本事，多年來HBuilder以js和vue語法提示著稱。通過AST分析， uni-app 新版可以精準判定這個項目使用了哪些組件和API。
不過這還不夠，分析工程源碼使用了什麼組件和API之後，還得考慮框架各組件和API之間可能存在依賴和耦合關係，這需要進一步的計算和關係梳理，具體而言：
- 組件：通過 vue-template-compiler 分析出來的AST，映射生成項目中使用到的組件清單，然後再基於Webpack插件將使用到的組件打包構建
- API：編譯器維護一個 api 依賴關係的 json 文件，該 json 文件描述每個 api 可能依賴的文件，然後 babel 查找到對應的 api 後，根據api 的依賴關係自動導入，重新編譯
在工程師持續的加班奮戰後， uni-app 終於推出了全新的2.2版本，解決了這些難題，大幅降低了發行包體積，gzip後的框架體積，從162k降低到92k，僅相當於你在工程中引用了 vue.js 、 vue-router 、以及部分es6 polyfill庫。（後續有詳細比較）
除了大幅降低發行包體積，新版還調整了預載策略，可以進一步加快頁面的渲染速度。
優化結果
搭建環境
我們使用 vue-cli 創建 uni-app 默認模板
vue create -p dcloudio/uni-preset-vue my-project
項目創建後，編譯生成H5端的發行目錄
npm run build:h5
然後配置 nginx 服務器，指定 root 目錄並啟用 gzip 壓縮，示例如下：
server {
...
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 4;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
...
}
runtime 動態裁剪
然後通過 Chrome DevTools 的 Network 面板，查看優化前的首頁網絡請求包大小，結果如下：
背景
uni-app 發佈以來，已經服務了幾十萬開發者。讓我們意外，或者說驚喜的是，有大量開發者用 uni-app 只編寫H5版，並沒有多端發佈（可參考 案例 ）。
這其實也符合 uni-app 的初衷， uni-app 的定位並不是需要多端發佈時才用 uni-app 。 uni-app 是一個使用 vue.js 開發所有前端應用的統一框架。對於一個前端工程師來說，使用 uni-app 做多端效率更高，做單一端也沒問題，並在各端有不少出彩的地方。
過去的版本迭代中， uni-app 已經成為了更好的小程序開發框架，比使用原生微信開發更有優勢。（見 評測 ）
在 uni-app 2.2的新版中，我們大幅優化了H5版的性能，讓使用 uni-app 開發的H5，性能體驗和直接使用 vue.js 開發H5拉齊。
可能不少開發者有某種誤解：多端框架要適配多端，所以性能肯定不如原生。我們想糾正一下：
- 切忌想當然，多看數據評測。還不信就自己動手實驗
- 請問使用 vue.js 開發的web性能好，還是使用原生js開發web性能好？答案是：使用 vue.js框架。為什麼？因為它在底層會自動優化數據同步、虛擬dom，比大多數開發手動寫的代碼要更高效。同樣的，使用 uni-app 也如此，框架底層的優化處理比大多數開發者手動寫setdata或dom操作更高效。
- 多端適配很多是在編譯時做的，並不影響運行時的性能
優化難點
想優化H5端的性能，並不是一件容易的事。
“功能全面”和“小巧極速”，這是一對最難調和的冤家。
為了保障多端的一致性， uni-app 實現了一套小程序的H5版Runtime，支持各種小程序的組件、API、配置。所以 uni-app 的H5版擁有比其他框架更好的跨端一致性。
但這也造成了老版的 uni-app ，輸出H5端時，包體積過大（框架未壓縮前有500k，部署gzip後162k）。
這確實是一個非常大的runtime，包含了幾十個內置組件，數百個API。而且這些API仍然在快速增加中。
不能像其他框架一樣因為功能少，所以體積小。我們不會用功能換性能，我們需要更好的方案。
優化方法
uni-app 包含幾十個內置組件、數百個API，是個“大而全”的框架；但開發者在開發具體應用時，未必能使用到所有的組件及API。若能根據項目具體情況，刪掉沒用到的組件及API，保留對項目有用的組件及API，便可精簡框架、減少體積，這即是“搖樹優化”的思路。
搖樹優化（Tree-Shaking），顧名思義，搖晃樹幹，將枯死無用的枝條搖掉，僅保留有用的樹枝。對應到框架層面理解，就是一個框架的眾多組件和API，可以按需使用，把未引用的框架部分裁剪掉。Tree-Shaking 最早由 Rollup 提出，屬於 死碼刪除 的一種形式。
常見的前端框架搖樹，一般是基於明確的 import 引用關係。比如引用某UI庫時，在A頁面使用該UI庫的search組件，此時需要寫js代碼import這個search組件，那麼搖樹分析就很容易。
但 uni-app 和小程序一樣，內置組件和API是不需要import的，這提升了開發的易用性，但此時卻加大了搖樹的難度，依靠簡單的import分析無法實現搖樹了。
幸好對DCloud團隊而言，AST語法分析是看家本事，多年來HBuilder以js和vue語法提示著稱。通過AST分析， uni-app 新版可以精準判定這個項目使用了哪些組件和API。
不過這還不夠，分析工程源碼使用了什麼組件和API之後，還得考慮框架各組件和API之間可能存在依賴和耦合關係，這需要進一步的計算和關係梳理，具體而言：
- 組件：通過 vue-template-compiler 分析出來的AST，映射生成項目中使用到的組件清單，然後再基於Webpack插件將使用到的組件打包構建
- API：編譯器維護一個 api 依賴關係的 json 文件，該 json 文件描述每個 api 可能依賴的文件，然後 babel 查找到對應的 api 後，根據api 的依賴關係自動導入，重新編譯
在工程師持續的加班奮戰後， uni-app 終於推出了全新的2.2版本，解決了這些難題，大幅降低了發行包體積，gzip後的框架體積，從162k降低到92k，僅相當於你在工程中引用了 vue.js 、 vue-router 、以及部分es6 polyfill庫。（後續有詳細比較）
除了大幅降低發行包體積，新版還調整了預載策略，可以進一步加快頁面的渲染速度。
優化結果
搭建環境
我們使用 vue-cli 創建 uni-app 默認模板
vue create -p dcloudio/uni-preset-vue my-project
項目創建後，編譯生成H5端的發行目錄
npm run build:h5
然後配置 nginx 服務器，指定 root 目錄並啟用 gzip 壓縮，示例如下：
server {
...
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 4;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
...
}
runtime 動態裁剪
然後通過 Chrome DevTools 的 Network 面板，查看優化前的首頁網絡請求包大小，結果如下：
然後啟用H5平臺的優化開關，重新查看首頁的網絡請求包大小，結果如下：
背景
uni-app 發佈以來，已經服務了幾十萬開發者。讓我們意外，或者說驚喜的是，有大量開發者用 uni-app 只編寫H5版，並沒有多端發佈（可參考 案例 ）。
這其實也符合 uni-app 的初衷， uni-app 的定位並不是需要多端發佈時才用 uni-app 。 uni-app 是一個使用 vue.js 開發所有前端應用的統一框架。對於一個前端工程師來說，使用 uni-app 做多端效率更高，做單一端也沒問題，並在各端有不少出彩的地方。
過去的版本迭代中， uni-app 已經成為了更好的小程序開發框架，比使用原生微信開發更有優勢。（見 評測 ）
在 uni-app 2.2的新版中，我們大幅優化了H5版的性能，讓使用 uni-app 開發的H5，性能體驗和直接使用 vue.js 開發H5拉齊。
可能不少開發者有某種誤解：多端框架要適配多端，所以性能肯定不如原生。我們想糾正一下：
- 切忌想當然，多看數據評測。還不信就自己動手實驗
- 請問使用 vue.js 開發的web性能好，還是使用原生js開發web性能好？答案是：使用 vue.js框架。為什麼？因為它在底層會自動優化數據同步、虛擬dom，比大多數開發手動寫的代碼要更高效。同樣的，使用 uni-app 也如此，框架底層的優化處理比大多數開發者手動寫setdata或dom操作更高效。
- 多端適配很多是在編譯時做的，並不影響運行時的性能
優化難點
想優化H5端的性能，並不是一件容易的事。
“功能全面”和“小巧極速”，這是一對最難調和的冤家。
為了保障多端的一致性， uni-app 實現了一套小程序的H5版Runtime，支持各種小程序的組件、API、配置。所以 uni-app 的H5版擁有比其他框架更好的跨端一致性。
但這也造成了老版的 uni-app ，輸出H5端時，包體積過大（框架未壓縮前有500k，部署gzip後162k）。
這確實是一個非常大的runtime，包含了幾十個內置組件，數百個API。而且這些API仍然在快速增加中。
不能像其他框架一樣因為功能少，所以體積小。我們不會用功能換性能，我們需要更好的方案。
優化方法
uni-app 包含幾十個內置組件、數百個API，是個“大而全”的框架；但開發者在開發具體應用時，未必能使用到所有的組件及API。若能根據項目具體情況，刪掉沒用到的組件及API，保留對項目有用的組件及API，便可精簡框架、減少體積，這即是“搖樹優化”的思路。
搖樹優化（Tree-Shaking），顧名思義，搖晃樹幹，將枯死無用的枝條搖掉，僅保留有用的樹枝。對應到框架層面理解，就是一個框架的眾多組件和API，可以按需使用，把未引用的框架部分裁剪掉。Tree-Shaking 最早由 Rollup 提出，屬於 死碼刪除 的一種形式。
常見的前端框架搖樹，一般是基於明確的 import 引用關係。比如引用某UI庫時，在A頁面使用該UI庫的search組件，此時需要寫js代碼import這個search組件，那麼搖樹分析就很容易。
但 uni-app 和小程序一樣，內置組件和API是不需要import的，這提升了開發的易用性，但此時卻加大了搖樹的難度，依靠簡單的import分析無法實現搖樹了。
幸好對DCloud團隊而言，AST語法分析是看家本事，多年來HBuilder以js和vue語法提示著稱。通過AST分析， uni-app 新版可以精準判定這個項目使用了哪些組件和API。
不過這還不夠，分析工程源碼使用了什麼組件和API之後，還得考慮框架各組件和API之間可能存在依賴和耦合關係，這需要進一步的計算和關係梳理，具體而言：
- 組件：通過 vue-template-compiler 分析出來的AST，映射生成項目中使用到的組件清單，然後再基於Webpack插件將使用到的組件打包構建
- API：編譯器維護一個 api 依賴關係的 json 文件，該 json 文件描述每個 api 可能依賴的文件，然後 babel 查找到對應的 api 後，根據api 的依賴關係自動導入，重新編譯
在工程師持續的加班奮戰後， uni-app 終於推出了全新的2.2版本，解決了這些難題，大幅降低了發行包體積，gzip後的框架體積，從162k降低到92k，僅相當於你在工程中引用了 vue.js 、 vue-router 、以及部分es6 polyfill庫。（後續有詳細比較）
除了大幅降低發行包體積，新版還調整了預載策略，可以進一步加快頁面的渲染速度。
優化結果
搭建環境
我們使用 vue-cli 創建 uni-app 默認模板
vue create -p dcloudio/uni-preset-vue my-project
項目創建後，編譯生成H5端的發行目錄
npm run build:h5
然後配置 nginx 服務器，指定 root 目錄並啟用 gzip 壓縮，示例如下：
server {
...
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 4;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
...
}
runtime 動態裁剪
然後通過 Chrome DevTools 的 Network 面板，查看優化前的首頁網絡請求包大小，結果如下：
然後啟用H5平臺的優化開關，重新查看首頁的網絡請求包大小，結果如下：
可以看到框架主庫(chunk-vendors.js)從162k變為92.8k，體積壓縮43%！
實際上，框架主庫主要分為三個部分：
- vue/vue-router基礎庫
- es6 polyfill庫
- uni-app runtime(組件&API實現)
如果對這三個部分再拆開對比，我們會看到uni-app組件庫優化比例更高：
| |vue/vue-router |es6 polyfill庫 |uni-app runtime|累計 | |-- |-- |-- |-- |-- | |優化前 |38k |43k |81k |162k | |優化後 |38k |26k |28.8k |92.8k |
Tips:
- uni-app runtime從81k瘦身為28.8k,裁剪比例達到64%
- 新編譯器對es6的使用也做了動態掃描，項目中用到的es6語法（包括uni-app runtime用到的es6語法），才會打包對應的polyfill實現，故es6 polyfill庫從43k瘦身為26k
腳本執行時間
然後，我們再通過Chrome DevTools 的 Performance 面板，查看優化前後的性能數據，對比結果如下：
背景
uni-app 發佈以來，已經服務了幾十萬開發者。讓我們意外，或者說驚喜的是，有大量開發者用 uni-app 只編寫H5版，並沒有多端發佈（可參考 案例 ）。
這其實也符合 uni-app 的初衷， uni-app 的定位並不是需要多端發佈時才用 uni-app 。 uni-app 是一個使用 vue.js 開發所有前端應用的統一框架。對於一個前端工程師來說，使用 uni-app 做多端效率更高，做單一端也沒問題，並在各端有不少出彩的地方。
過去的版本迭代中， uni-app 已經成為了更好的小程序開發框架，比使用原生微信開發更有優勢。（見 評測 ）
在 uni-app 2.2的新版中，我們大幅優化了H5版的性能，讓使用 uni-app 開發的H5，性能體驗和直接使用 vue.js 開發H5拉齊。
可能不少開發者有某種誤解：多端框架要適配多端，所以性能肯定不如原生。我們想糾正一下：
- 切忌想當然，多看數據評測。還不信就自己動手實驗
- 請問使用 vue.js 開發的web性能好，還是使用原生js開發web性能好？答案是：使用 vue.js框架。為什麼？因為它在底層會自動優化數據同步、虛擬dom，比大多數開發手動寫的代碼要更高效。同樣的，使用 uni-app 也如此，框架底層的優化處理比大多數開發者手動寫setdata或dom操作更高效。
- 多端適配很多是在編譯時做的，並不影響運行時的性能
優化難點
想優化H5端的性能，並不是一件容易的事。
“功能全面”和“小巧極速”，這是一對最難調和的冤家。
為了保障多端的一致性， uni-app 實現了一套小程序的H5版Runtime，支持各種小程序的組件、API、配置。所以 uni-app 的H5版擁有比其他框架更好的跨端一致性。
但這也造成了老版的 uni-app ，輸出H5端時，包體積過大（框架未壓縮前有500k，部署gzip後162k）。
這確實是一個非常大的runtime，包含了幾十個內置組件，數百個API。而且這些API仍然在快速增加中。
不能像其他框架一樣因為功能少，所以體積小。我們不會用功能換性能，我們需要更好的方案。
優化方法
uni-app 包含幾十個內置組件、數百個API，是個“大而全”的框架；但開發者在開發具體應用時，未必能使用到所有的組件及API。若能根據項目具體情況，刪掉沒用到的組件及API，保留對項目有用的組件及API，便可精簡框架、減少體積，這即是“搖樹優化”的思路。
搖樹優化（Tree-Shaking），顧名思義，搖晃樹幹，將枯死無用的枝條搖掉，僅保留有用的樹枝。對應到框架層面理解，就是一個框架的眾多組件和API，可以按需使用，把未引用的框架部分裁剪掉。Tree-Shaking 最早由 Rollup 提出，屬於 死碼刪除 的一種形式。
常見的前端框架搖樹，一般是基於明確的 import 引用關係。比如引用某UI庫時，在A頁面使用該UI庫的search組件，此時需要寫js代碼import這個search組件，那麼搖樹分析就很容易。
但 uni-app 和小程序一樣，內置組件和API是不需要import的，這提升了開發的易用性，但此時卻加大了搖樹的難度，依靠簡單的import分析無法實現搖樹了。
幸好對DCloud團隊而言，AST語法分析是看家本事，多年來HBuilder以js和vue語法提示著稱。通過AST分析， uni-app 新版可以精準判定這個項目使用了哪些組件和API。
不過這還不夠，分析工程源碼使用了什麼組件和API之後，還得考慮框架各組件和API之間可能存在依賴和耦合關係，這需要進一步的計算和關係梳理，具體而言：
- 組件：通過 vue-template-compiler 分析出來的AST，映射生成項目中使用到的組件清單，然後再基於Webpack插件將使用到的組件打包構建
- API：編譯器維護一個 api 依賴關係的 json 文件，該 json 文件描述每個 api 可能依賴的文件，然後 babel 查找到對應的 api 後，根據api 的依賴關係自動導入，重新編譯
在工程師持續的加班奮戰後， uni-app 終於推出了全新的2.2版本，解決了這些難題，大幅降低了發行包體積，gzip後的框架體積，從162k降低到92k，僅相當於你在工程中引用了 vue.js 、 vue-router 、以及部分es6 polyfill庫。（後續有詳細比較）
除了大幅降低發行包體積，新版還調整了預載策略，可以進一步加快頁面的渲染速度。
優化結果
搭建環境
我們使用 vue-cli 創建 uni-app 默認模板
vue create -p dcloudio/uni-preset-vue my-project
項目創建後，編譯生成H5端的發行目錄
npm run build:h5
然後配置 nginx 服務器，指定 root 目錄並啟用 gzip 壓縮，示例如下：
server {
...
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 4;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
...
}
runtime 動態裁剪
然後通過 Chrome DevTools 的 Network 面板，查看優化前的首頁網絡請求包大小，結果如下：
然後啟用H5平臺的優化開關，重新查看首頁的網絡請求包大小，結果如下：
可以看到框架主庫(chunk-vendors.js)從162k變為92.8k，體積壓縮43%！
實際上，框架主庫主要分為三個部分：
- vue/vue-router基礎庫
- es6 polyfill庫
- uni-app runtime(組件&API實現)
如果對這三個部分再拆開對比，我們會看到uni-app組件庫優化比例更高：
| |vue/vue-router |es6 polyfill庫 |uni-app runtime|累計 | |-- |-- |-- |-- |-- | |優化前 |38k |43k |81k |162k | |優化後 |38k |26k |28.8k |92.8k |
Tips:
- uni-app runtime從81k瘦身為28.8k,裁剪比例達到64%
- 新編譯器對es6的使用也做了動態掃描，項目中用到的es6語法（包括uni-app runtime用到的es6語法），才會打包對應的polyfill實現，故es6 polyfill庫從43k瘦身為26k
腳本執行時間
然後，我們再通過Chrome DevTools 的 Performance 面板，查看優化前後的性能數據，對比結果如下：
可以看出，最耗時的腳本執行時間，從227ms提升為154ms，時間提升達到32%。
如何使用
雖然內部實現比較複雜，但 uni-app 對外暴漏了簡單的配置，開發者只需在配置文件中打開一個開關即可。具體在 manifest.json 中 h5 節點配置如下選項:
"h5" : {
"optimization":{
"treeShaking":{
"enable":true //啟用搖樹優化
}
}
}
2.2版的其他優化
在 uni-app 2.2版中，還開放了 package.json 和 vue-config.js 的自定義，開發者可以自由的配置編譯策略。
現在可以自定義支持所有小程序平臺，包括釘釘小程序、高德小程序、抖音小程序...等。這樣除了標準的8大平臺（iOS、Android、H5、微信小程序、支付寶小程序、百度小程序、頭條小程序、QQ小程序），這些生態的子生態也可以分版本條件編譯。
同樣，也支持對H5端進行多子端編譯，比如微信裡的內嵌的H5、App裡內嵌的H5...都可以分開條件編譯。
如此靈活的條件編譯，對於一套工程的多端發佈、共享複用、同步升級，有莫大的好處。即便是僅開發H5版， uni-app 的多端條件編譯也提供了更靈活和強大的工程化能力。
2.2版本還可以設置各種靜態資源、js、小程序自定義組件的編譯和拷貝策略。如果你之前的h5項目或小程序項目想轉換至uni-app下，又不想挪動某些目錄結構，那麼在vue-config.js裡配置策略即可。
使用uni-app開發H5和直接開發H5相比的優勢
在與直接開發h5拉齊性能的基礎之上， uni-app 給開發者提供了更多優勢：
- 開發效率 uni-app提供了大量適合手機頁面的基礎組件（其實就是小程序組件）。還提供了擴展組件uni ui。 插件市場 更有600多款插件。
無論開發者想找一個電商的模板，還是找一個圖表組件，都可以手到擒來。開發效率更勝以往。
- 多端編譯 我們開發H5時，經常需要給瀏覽器輸出一份、給微信等超級App輸出一份、給自家的App輸出一份。甚至不同地域、不同用戶畫像，都會輸出不同版本。以前，開發者只能對js部分進行條件編譯，甚至不得不建多個倉庫進行多版維護。
uni-app解決了這些煩惱，它的條件編譯非常靈活強大：
- 不管是組件、js還是css，都可以按平臺編譯輸出
- 還可以多個平臺進行“與和或”的運算編譯
- 除了文件中的代碼，整個文件、甚至整個目錄，都可以條件編譯
例如微信、QQ等在支持x5內核的內置瀏覽器中，使用x5的視頻同層渲染；或者在微信服務號中調用微信卡劵，這段代碼只有build到 dist/h5-weixin 這個目錄下的版本才會被編譯進去，其他平臺不會有這段代碼
// #ifdef H5-WEIXIN
wx.openCard({
cardList: [{
cardId: '',
code: ''
}]// 需要打開的卡券列表
});
// #endif
希望大家能夠轉發點贊，謝謝~
關注作者，我會不定期在頭條分享Java，Spring，MyBatis，Netty源碼分析，高併發、高性能、分佈式、微服務架構的原理，JVM性能優化、分佈式架構，BATJ面試 等資料...
轉發此文，關注並私信小編“學習”web前端課程資料馬上免費領取
相關推薦
