vue cil4 nginx terser-webpack-plugin打包优化
Posted 哎哟哟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue cil4 nginx terser-webpack-plugin打包优化相关的知识,希望对你有一定的参考价值。
vue cil4 nginx 打包优化
项目介绍
最近项目结束,项目是vue的,vue版本是2.6.10,cil版本是4,webpack4,要部署在服务器上,用的是nginx,但是出现了一个严重的问题,首页加载需要40多秒!需要优化
1 关闭productionSourceMap
module.exports =
productionSourceMap: false
2 开启gzip
因为本项目中图片不是很多,所以之压缩了代码和字体。
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\\.(js|css|json|ttf)(\\?.*)?$/i
module.exports =
configureWebpack:
plugins: [
new CompressionWebpackPlugin(
filename: '[path][name].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 0,
minRatio: 0.8,
),
new Webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/),
]
同样 nginx 上也需要配置
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 8;
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
gzip_vary on;
3 清除console
因为项目中用到了 eslint ,运用 npm i -D uglifyjs-webpack-plugin 这个插件的话,总是报错,所以我们用的是 terser-webpack-plugin 这个插件, 但是因为我们是webpack4,所以在运用 terser-webpack-plugin 的时候一定要注意版本号,要用"terser-webpack-plugin": "^4.2.3",
版本,否则会报一个 ‘javascript’ 的错误
const TerserPlugin = require('terser-webpack-plugin')
configureWebpack:
optimization:
minimizer: [
new TerserPlugin(
terserOptions:
ecma: undefined,
warnings: false,
parse: ,
compress:
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
,
,
),
],
,
,
4 懒加载
5 仍旧不够快
将这些全部弄好之后,目前现在大概在7秒作用,仍旧是太慢了,发现是这个文件过大导致加载慢
偶然间发现一个插件
添加这一行代码,build后会生成一个report.html的文件,打开后可以看到
找到我们加载慢的哪个文件,看看里边哪个的体积过大我们就优化哪个
在我的项目重是因为echart.js文件过大导致的加载慢,首页再在并不需要echart,查看代码,发现echart引入到了min.js中,注释,在每个用echart的页面中单独引入就可以了,再次查看chunk-vendors 文件,文件直接从600多KB,变成了300多KB,加载速度变成了3S左右,后来又根据report.html压缩了一些插件的体积,最终首页加载速度变成了2S内,完美手工。
因为本项目是内网项目,所以大家也可以根据自己的项目,再加入一些别的优化,cdn引入等,可自行搜索。
最终代码:
const Webpack = require('webpack')
// 引入该插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 引入压缩插件
const TerserPlugin = require('terser-webpack-plugin')
// 匹配此 RegExp 的资源
const productionGzipExtensions = /\\.(js|css|json|ttf)(\\?.*)?$/i
module.exports =
transpileDependencies: ['vuetify'],
assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)这些文件都可以写里面
productionSourceMap: false,
configureWebpack:
plugins: [
new CompressionWebpackPlugin(
filename: '[path][name].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 0,
minRatio: 0.8,
),
new Webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/),
],
optimization:
minimizer: [
new TerserPlugin(
terserOptions:
ecma: undefined,
warnings: false,
parse: ,
compress:
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
,
,
),
],
,
,
以上是关于vue cil4 nginx terser-webpack-plugin打包优化的主要内容,如果未能解决你的问题,请参考以下文章