标签：时因 25 rw -- 56 js vendors 首屏 root
前端项目时因chunk-vendors过大导致首屏加载太慢的优化
因app首页加载不流畅，于是去检查首页加载项的耗时，最终发现是前端加载时js文件太大，导致首页加载太慢，于是选择了以下方案进行优化。
一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。
1.npm使用下面命令安装
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;
}
}
四、打包后对比结果很明显，原来1.3M的js文件被压缩到了351k，前端加载的速度也提升的很多。
[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]#
标签：时因,25,rw,--,56,js,vendors,首屏,root 来源： https://www.cnblogs.com/lzg-blog/p/15018487.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。