ウェブサイトのパフォーマンスを向上させるためのvue-cli3ウェブパックパッケージの最適化

最近、ウェブサイトのパフォーマンスを向上させるために、パッケージの最適化を検討しました。ロードされたパッケージが小さいほど、サーバーの応答が速くなります。パッケージのアーティファクトであるWebpackは、十分に研究されていません。だから学ぶ。

パッケージの最適化は、一般的に次の側面から考慮されます。

1つは、コードの圧縮です

1..map ファイルを削除し ます

.map  ファイルの役割：プロジェクトがパッケージ化された後、コードは圧縮および暗号化されます。実行時にエラーが報告された場合、出力エラーメッセージは、コードがエラーを報告した場所を正確に知ることができません。 
これにより、 .map  暗号化されていないコードのように、  どの行と列が間違っているかを正確に出力できます。

オペレーティング：

module.exports = {
  // ...
  productionSourceMap: false,
}

2、オンデマンドでロード

3、画像圧縮

 

参照1：https：//www.jianshu.com/p/11c1d85ccd71

参照2：https：//blog.csdn.net/weixin_33970449/article/details/91367865  [パブリックコードの抽出、cdnを使用してロード]

参照3：https：//segmentfault.com/a/1190000021477337

参照4：https：//www.jianshu.com/p/5e9c78a6a960  [圧縮された画像とjs、css]