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打包优化的主要内容,如果未能解决你的问题,请参考以下文章

vue部署到nginx

nginx结合vue+node简单配置

vue本地启动和在nginx上启动的原理

vue加载nginx内存狂涨不加载

如何将vue工程部署到nginx下

vue配合nginx打包路径层问题