本番環境導入es 6コード

時は流れ、9102年の末尾に来て、es 6の正式発表から4年半が過ぎた.先端が伸びる中、YUI、ie、jQuery、今、es 5を見送る時だ.
収益はどこですか.
プログラマーが技術的な意思決定を行う際、通常の目的はkpiのために、昇給することであり、この技術は流行している.いや、もちろん業務に価値を生むためだ.
es 6コードを直接導入することで得られるメリットは、次のとおりです.

コード体積減少

パフォーマンス向上

構築時間の短縮

コード体積減少
まず、es 6は新しい構文と特性をもたらし、コードをより簡潔にし、コード量を減少させることができる.次に、babelの翻訳後、helperが生成され、polyfillが導入され、実行時に処理できない構文特性があり、翻訳中にソースコードを修正しなければならないため、コード量が増加することもあります.もちろん、es 6コードの導入にもbabelが更新された構文の一部を翻訳する必要があります.babelを全く使用しないわけではありません.
Googleエンジニアの試験結果、es 6コードのbundle sizeはes 5コードより50%減少した.私自身の実践の結果はそんなに誇張されていません.25%ぐらいです.
version
bundle size
Gzipped
es5
221kb
39kb
es6
170kb
29kb
私と彼のテスト結果の違いが大きいのは、最終的な結果が一人一人のコードスタイルとコード内容と大きく関係しているからです.私がテストに使うコードはオンラインプロジェクトのコードで、私個人のコードスタイルはes 6/7/8文法を大量に使用していますが、プロジェクト自体はビジネスロジックを書くことが多く、プロジェクトはVueを使用しています.実は多くのjsコードはテンプレートのコンパイル後に生成されたレンダリング関数です.
したがって、es 6のコードはes 5のコード体積より15%〜50%減少し、具体的にどれだけ減少できるかは、コードスタイルおよびコード内容に依存する.コードスタイルが現代的であればあるほど、コードに「生成されたコード」が少なくなり、収益が高くなります.
パフォーマンスの向上
Es 6コードがes 5コードに比べて性能が高い理由は2つあると思います

符号量の減少による解析時間の減少は、符号体積の減少

に比例する.

運転性能の向上

第一に、ブラウザの解析コード時間の減少は比較的小さく、chromeのPerformanceパネルから、200 kbのjsファイルCompile Scriptを解析するのに10 msかかることがわかります(テストマシンはデスクトップ、i 7/16 G).
2番目のポイントの場合、ランタイムパフォーマンス.es 6がリリースされたばかりの頃は、jsエンジンが最適化するのに十分な時間がなかったため、多くの新しい特性の性能が低かった.比較すると、es 5およびより古いコードはブラウザの長時間最適化を経ており、es 6が出たばかりの頃は、es 6の性能にも大きな懸念があった.
Githubにはes 6とes 5の性能比較を専門とする倉庫があります.
比較結果から、chrome 72バージョンでは、es 6コードの性能がbabelから変換されたes 5コードよりも優れており、手書きのes 5コードに比べてそれぞれ千秋があり、基本的に55開であることがわかる.
また,ブラウザのes 6に対する性能最適化は持続的であり,最近ではV 8がReact hooksのために配列解体の性能を改善する.
実行時のes 6コードとes 5コードの性能比較についても,オンラインプロジェクトを用いて実験を行った.実験方式は以下の通りである.

は、performance APIのパッケージ後のappを利用する.jsファイルの先頭にタイムスタンプを記入する、jsファイルの末尾から開始時間を減算して、1つの時間を得る、周知のように、パッケージ後のapp.jsは即時実行関数であるため、この時間にはappが含まれる.jsファイルの一部のコードの実行時間

chromeのPerformanceパネルを用いる、jsの実行時間Evaluate Script

を直接得ることができる.
実験結果は以下の通り(20回の平均値)
version
記録された運転時間
PerformanceパネルのEvaluate Script
es5
258.88ms
295.29ms
es6
206.28ms
241.59ms
テスト条件下でes 6のコードは20%程度の運転性能向上を遂げた
リスクはどこだ?
jsの運行環境は非常に複雑で、デスクトップ端、移動端、各種ウィジェット、各種webview、node.js,es 6コードを配備できるかどうかは自分で判断するしかない.
私の個人的な経験では、ほとんどの中バックグラウンドプロジェクトはes 6コードを直接配置する条件を備えており、具体的な実施では、es 6をサポートせずにes 5のコードを実行するための降格案があるに違いありません.
実装方法
VueユーザーはVue cliの--modernを通じて直接現代モードを開くことができる.
非Vue利用者は,この文章で述べたスキームによって行うことができる.おそらく、scriptタグのtype=moduleをブラウザとしてes 6の検出を全面的にサポートしているかどうか、type=nomoduleによって劣化処理を行う.

//    module    ，       


//   module    ，    

すべき はsafari 10がnomoduleをサポートしていないため、 ダウンロードと の を する があることです.(ps:safariブラウザは の )
ダウングレードのスキームは、es 5のみをサポートするブラウザでもコードを できることを しますが、これらの いブラウザは2つのコードをダウンロードし、 が に きいです. いデバイスは 、 パフォーマンスと ネットワーク を し、パフォーマンスの に えられないためです.だから、もしあなたのビジネスがes 5と を つ があるユーザーが20% に したら、 はこの を することに しないと います.
es 5が く ないと できるユーザは、es 6を にサポートするブラウザバージョンにbrowserlistを することができ、ダウングレードスキームを する がなく、 の という の をもたらす.
browserslistの

Chrome >= 60
Safari >= 10.1
iOS >= 10.3
Firefox >= 54
Edge >= 15

めくくり
はすべてを って って、es 5も ではありません.
リファレンス

deploying-es2015-code-in-production-today

https://myst729.github.io/pos...