Vueバッグサイズ最適化の実現（1.72 Mから94 Kまで）

一、背景
最近ウェブサイトを作りました。uideaは独立した開発者をサポートするためにUIの設計をしていました。当時は開発に専念していました。
なにしろ、小さい水道サーバーですから、帯域幅を上げるより、コードを見て最適化してもいいですか？コストパフォーマンスがもっと高いです。
これは最適化前のカバンの大きさです。こいつは全部1.72 Mです。パイプの負荷時間は直接3 s以上に行きました。妾は耐えられません。

二、目標
これは最適化しなければなりません。最適化の前に大体目標を決めなければなりません。目標はまた指標で測定する必要があるので、二つの指標を決めました。

ページのロード時間は多くなくて、少なくとも1 s以内なら、早ければ早いほどいいです。

包の大きさは200 k以内に制御されます。
なぜこの二つの目標を決めますか？まずページのロード時間は最終的に解決しなければならない問題です。ページのロード時間は大体において、影響要素は二つあります。ネットとカバンの大きさ、ネットは一時的にお金が足りなくてアップグレードできません。
まず、カバンの大きさを定義します。ここでは主に入口のカバンの大きさを指します。Vueはap.jsとap.cssです。入り口でページをロードしたら、少なくとも展示できます。
どのぐらいの大きさに最適化しますか？
一方、vue-cli-serviceは244 Kを超えないようにと提案しています。一方で、標的を探して、似たようなウェブサイトのカバンの大きさを見てみます。私達も参照があります。彼のカバンの大きさはmaterial paletteです。彼のバッグの大きさは大体150 kぐらいです。私の機能はもっと複雑です。だから、両者の中の200 Kを目標として取りました。
ここではなぜ目標を言いますか？目標は実はとても重要なので、古い話も的中しています。目標がないと、実行中に途中で投げ出したり、半歩だけ進めば終わります。
恋愛に関して言えば、彼女を探すという目標があるなら、確率は高いですが、もしあなたの目標が確定した女性（例えば張三）に追いかけて彼女を作ると、成功する確率が大幅に増加します。
三、案
目標が決まったら、それからプランを決めます。
私は初めてWebの最適化をしましたが、これまでにAndroidパッケージのサイズを最適化した経験があります。

コード混淆

資源はcdnに置いてあります。開発時に手間を省き、資源はasetsの下に置いて、直接requireに導入されました。これも一つの主要な部分です。

不要なライブラリを削除し、機能が近いライブラリを統合し、機能の少ないライブラリだけを使って、自分で

を実現できるかどうかを確認してください。

gzip圧縮

サードパーティライブラリもcdn

に置く。
1-3つの最適化案はまず思いつきました。そしてネットでVue対応の最適化戦略を検索しました。また後の二つが追加されました。
他にもいくつかのプログラムがあります。例えば、ルーティングが不精でロードされていますが、このサイトの主な内容はトップページに集中していますので、これは考えられませんでした。
だから全部で5つの最適化戦略を決めました。
四、実行
1.コード混淆
コードの混淆は多く言いませんでした。バッグのサイズを節約する一方で、いくつかの逆コンパイルの難しさを加えて、直接ネット上でVue混淆の配置を探しました。

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
 configureWebpack: (config) => {
  //   uglifyjs-webpack-plugin
  let UglifyPlugin = require('uglifyjs-webpack-plugin');

  if (process.env.NODE_ENV == 'production') {
   //     
   config.mode = 'production'
   //             js  
   let optimization = {
    minimizer: [new UglifyPlugin({
     uglifyOptions: {
      warnings: false,
      compress: {
       drop_console: true,
       drop_debugger: false,
       pure_funcs: ['console.log']
      }
     }
    })]
   }
   Object.assign(config, {
    optimization
   })
  } else {
   //          
   config.mode = 'development'
}
  }
 }
}

2.資源はcdnに置く
このステップも簡単です。資源は全部アリ雲ossに置いて、何分間で解決します。
3.不要ライブラリの削除
このステップは多くの時間がかかりました。開発時に手間を省き、多くのライブラリが直接githubで検索してみたら、yarn addを導入して完了しました。今は細かく再分割してください。
包装コマンドの後に--レポートを入れて包装の状態を見てください。

yarn build --report

まず、ElemenntUi（gzip圧縮後約158 k）を外し、開発時にElementaUiとVuetifyを混用しました。実はVuetifyを一つ残しておけば十分です。そして、インターフェースに小さな改造をすれば完成です。
それから、lodashです。その中のいくつかの方法しか使えませんでしたが、彼の体積は小さくなく、gzipの圧縮後は大体25 kです。そこで、lodashソースを探して、いくつかの方法を引き出すつもりです。しかし、lodashコードの入れ子、引用が深すぎて、あまり引き出しません。直接にこの倉庫を干して、いくつかのより純粋な実現をしました。主な時間はlodashのソースコードを読むのに使いました。
それからvuescrollです。スクロールバーのカスタムを実現する時に、このライブラリを怠けて使ってみました。このライブラリの体積はまだ小さくないです。gzipは圧縮してから20 k近くになります。直接に乾かして、自分でスタイルを書いてください。0)
このようにして、いくつかのプリクラを落としました。
4.gzip圧縮
これはオンラインで探した解決策です。直接にvue.co.fig.jsに配置を追加して、そしてnginxにも対応する配置をしてください。

// vue.config.js
module.exports = {
 configureWebpack: (config) => {
  if (process.env.NODE_ENV == 'production') {
   // ...
   // gzip
   config.plugins.push(new CompressionWebpackPlugin({
    algorithm: 'gzip',
    test: /\.js$|\.html$|\.json$|\.css/,
    threshold: 10240,
    minRatio: 0.8
   }))
  }
  // ...
 }
}
// nginx          
gzip_static on;

このように梱包すると.gzファイルが生成されます。inxは自動的に使用されます。gzファイル
5.第三者倉庫はcdnに置く。
ここでは主にVuetifyという倉庫を扱っていますが、gzip以降も50 k近くの大きさがありますので、cdnに置くと早いです。
まずパッケージ設定からVuetifyを削除します。

module.exports = {
 // ...
 configureWebpack: (config) => {
  if (process.env.NODE_ENV == 'production') {
   //        ，   cdn
   config.externals = {
    vuetify: 'Vuetify'
   }
  } else {
   //          
   config.mode = 'development'
   config.externals = {
    vuetify: 'Vuetify'
   }
  }
 }
}

そしてindex.1で手動でvuetify cssとjsをロードします。

<link href="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.css" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.js"></script>

ここにはもっといい方法があります。webpackパラメータを通じてindexに伝えられます。ejsを通して紹介します。今は簡単です。ここではやっていません。
五、効果
上記のいくつかの戦略により、最終的なパケットサイズは1.72 Mから94 kに最適化される。

六、続き
全体的に見れば、最適化の効果は明らかですが、後からできることがあります。

より微細化された最適化は、webpackに関連してより深い定化を行うことができるはずです。

は上述のcdn上の第三者ライブラリを統合して、結局直接index.に置くのはあまりにも散漫で、いいプロジェクト構造ではないです。後の開発にも役立ちません。

は後続のコード開発を規範化しています。例えば、三方倉庫の引用規範、資源の導入規範など、できることはまだたくさんあります。

各配置前の性能テストは、ページのロード速度が基準

に達しているかどうかを確認します。
できることはまだたくさんあります。時には一つのことをして、目標を達成するのは終わっていません。目標を維持するのも考えなければなりません。
ここで、Vueパッケージのサイズの最適化の実現（1.72 mから94 Kまで）についての記事を紹介します。Vueパッケージのサイズの最適化については、以前の記事を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。