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
            },
          },
        }),
      ],
    },
  },
}