最初の画面負荷の最適化
2019年7月11日に更新しました
ベースのプロジェクトvue2.x + VUE-ルータ+ vuex +要素-UI 。結合VUE-cli3.0
背景と結果：遅くロードを折る行項目の後、11Sのロード時間は、4秒程度でロード時間の最適化制御の後、パッケージ+ 5.76M 2.54Mの元のボリュームから変更。
最適化の方向：
-
1.コンポーネントは、オンデマンドでロードされます。
-
2.画像圧縮。
-
3.cdnリソースを導入し（VUE、vuex、VUEルータ、コンポーネントライブラリ、等）
-
4.使用GZIP（Open Serverは、GZIPが必要です）
その他：削除冗長コードとコメント、セブンの牛は、静的リソースなどCDNサイトのストレージをクラウド！！
いくつかのツール：
WebPACKのバンドルアナライザプラグイン、webbpackパッケージ解析ツールのWebPACKバンドルアナライザ、
画像圧縮サイト：TinyPNGの
スピードのウェブサイト：Pingdomの
WebPACKのパッケージ分析ツールがインストールされています。
npm install --save-dev webpack-bundle-analyzer //npm安装
yarn add -s webpack-bundle-analyzer -D//yarn 安装
①、その後も内部のvue.config.jsを設定する必要があります
module.exports = {
baseUrl: process.env.NODE_ENV == 'production' ? './' : '/',
outputDir: 'dist',
assetsDir: 'static',
chainWebpack: config => {//①这里是配置的部分
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
}
そして、リアパッケージファイルサイズ（ファイルブロック表示にマウススライド）の外に、このようなページがあるでしょうプロジェクトを実行します。この連続最適化によると、あなたのプロジェクトファイルサイズの最適化の世話します。
画像圧縮サイトでは、その場所、自動圧縮、大きな絵ポイントPNG画像の圧縮または大幅に画像をドラッグして、最終的にPS変更接尾辞のjpg、または直接変更の下で、ラインで使用することができます。同じサイズのPNG画像を使用した場合よりも、なぜ、私は（JPGは、いくつかの恥ずかしを圧縮することはできません）ことも、大きなJPG画像を見つけましたが、要求より少ない時間ので、理由を理解するために戻って行きます。
ガンサイト：デプロイドメイン、適切な場所に固執します。瞬間を待って、結果が出てきました。
話題が始まった
コンポーネントは、需要にロードされている
公式のウェブサイト、それは非常に明らかにしました
//main.js
import {Input,Radio,FormItem,Icon,Row,Col,Upload,Message,MessageBox} from 'element-ui'
Vue.use(Input);Vue.use(Radio);Vue.use(FormItem);Vue.use(Icon);Vue.use(Row);Vue.use(Col);Vue.use(Upload);
Vue.use(Loading);Vue.use(DatePicker);Vue.use(Table);Vue.use(TableColumn);
//Vue.use(Message);Vue.use(MessageBox);//
Vue.useと上記のメッセージとあれば、あなたのMessageBox（）メソッドは、彼は自動的にこのような使用の場合は、もう一度それを実行します
グローバル使用：方法
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;//因为我用到了confirm
方法2：テンプレート内の必要性
//user.vue
import Message from 'element-ui'
mounted(){
Message.error(“错误！“)；
}
CDNは、導入された
いくつかのCDNリソース駅：jsdeliver、bootCDN、unpkgサイトの検索時間を加えたアドレスの後に「/パッケージを検索」の背後には、
まずHTMLのスクリプトタグで導入します
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="images/x-icon" href="logo1.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/player/lottie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
<!--你如要用vue devtools,需引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bin/jsencrypt.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/iview/3.4.2-rc.1/iview.min.js"></script>
<title>Title</title>
</head>
vue.config.js
module.exports = {
// 部署应用的根路径(默认'/'),也可用相对路径(存在使用限制)
baseUrl: process.env.NODE_ENV == 'production' ? './' : '/',
outputDir: 'dist',
assetsDir: 'static',
configureWebpack: {//这里是添加的部分
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios',
'echarts': 'echarts',
'lottie-web': 'lottie',
'jsencrypt': 'JSEncrypt',
'iview': 'iview'
}
},
}
gzipの
この最適化アプローチは、サーバ（バックエンド）のオープンGZIPを必要とし、私はちょうど行われなければ、フロントエンドのニーズについて何かを言うだろう
注：開かれたgzip_static圧縮とが.gzファイルを終了要求（のnginxを使用している場合）と同じ名前とディレクトリに存在する力の前提のgzip_staticはnginxのです。
その後gzip_static最初の準備GZを使用して圧縮ファイルを圧縮し、サーバは圧縮ファイルと元のファイルを保存するために多くのスペースを消費しますが、自分自身の評価に長所と短所。
参考：最初の画面に最適化負荷 githubの/ VUE-CLI3-config設定
圧縮のWebPACK - プラグインのプラグインをインストールします。
npm i compression-webpack-plugin -save-dev
//或者
yarn -D compression-webpack-plugin
//vue.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);//检测构建环境
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
configureWebpack: config => {
if(IS_PROD){
const plugins = [];
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
})
);
config.plugins = [
...config.plugins,
...plugins
];
}
}
};
そして、以上の10Kのファイルが同じ名前サフィックスが.gzファイルにパッケージ化されている見ることができる（糸ビルド）パッケージ
目的は、レコードを書いて、お互いから学ぶことです！
スキットルズが好きですか？私はキリンを持って、あなたはあなたを絞ることができます！
