フロントエンドプロジェクトでchunk-vendorsが大きすぎるため、トップスクリーンのロードが遅すぎる最適化
appトップページのロードがスムーズではないため、トップページのロード項目の消費時間をチェックし、最終的にフロントエンドのロード時にjsファイルが大きすぎて、トップページのロードが遅すぎることを発見し、以下の案を選択して最適化した.一、compression-webpack-pluginプラグインをインストールする.フロントエンドはファイルをパッケージする.gzファイルは、nginxの構成によりブラウザに直接解析する.gzファイルは、ファイルのロード速度を大幅に向上させることができます.1.npm次のコマンドでインストール
2.yarn次のコマンドでインストール
二、次にvueのプロファイルvueを変更します.config.js
三、nginx配置
四、梱包後の比較
その結果,元1.3 Mのjsファイルは351 kに圧縮され,フロントエンドのロード速度も大幅に向上したことが明らかになった.
npm install --save-dev compression-webpack-plugin
2.yarn次のコマンドでインストール
yarn add compression-webpack-plugin --save-dev
二、次にvueのプロファイルvueを変更します.config.js
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
publicPath:'/appShare/',
productionSourceMap: false,
configureWebpack:{
resolve:{
alias:{
'@':path.resolve(__dirname, './src'),
'@i':path.resolve(__dirname, './src/assets'),
}
},
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// compression-webpack-plugin
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
]
},
三、nginx配置
server{
listen 8087;
server_name localhost;
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
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;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
location /appShare {
client_max_body_size 10m;
root /home/test/webIndex/appShare;
try_files $uri $uri/ /appShare/index.html;
index index.htm index.html;
}
}
四、梱包後の比較
[root@localhost js]# ll -h
1.9M
-rw-r--r-- 1 root root 1.3M 10 25 13:56 answer.1e6b29ba.js
-rw-r--r-- 1 root root 351K 10 25 13:56 answer.1e6b29ba.js.gz
-rw-r--r-- 1 root root 49K 10 25 13:56 app.319e43e7.js
-rw-r--r-- 1 root root 18K 10 25 13:56 app.319e43e7.js.gz
-rw-r--r-- 1 root root 21K 10 25 13:56 list.898721c9.js
-rw-r--r-- 1 root root 5.0K 10 25 13:56 list.898721c9.js.gz
-rw-r--r-- 1 root root 45K 10 25 13:56 qa.d8599e38.js
-rw-r--r-- 1 root root 14K 10 25 13:56 qa.d8599e38.js.gz
-rw-r--r-- 1 root root 45K 10 25 13:56 shareBottle2.4ceeca4d.js
-rw-r--r-- 1 root root 14K 10 25 13:56 shareBottle2.4ceeca4d.js.gz
[root@localhost js]#
その結果,元1.3 Mのjsファイルは351 kに圧縮され,フロントエンドのロード速度も大幅に向上したことが明らかになった.