webpack之生产环境production

生产环境插件

1，compression-webpack-plugin

• ⑴目的：由于nginx开启gzip需要消耗服务器的cpu性能，从而也会影响服务响应时间，所以前端先把打包后的文件再压缩一次放到nginx上面，配置nginx规则，遇到压缩过的就不在压缩，直接压缩过的文件返回给浏览器解析。
• (2)流程，
• Ⅰ，前端通过compression-webpack-plugin插件将文件打包后的文件压缩。通过npm i compression-webpack-plugin -D命令安装。

• 例如vue-cli3.x的配置文件

  if (process.env.NODE_ENV ==='production'){
    config.plugin('compressionPlugin')
    .use(new compressionWebpackPlugin({
      // filename: '[path].gz[query]',
      algorithm: 'gzip',
      // test: /.(js|css|txt|html|ico|svg)(?.*)?$/i,
      test:/.(js|css|html|ttf|otf)(?.*)?$/i,
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false
     }));
  }

• Ⅱ，打包后所有的dist文件会出现.gz的后缀文件（*注意不要删除源备份，deleteOriginalAssets: false表示不删除备份，否则浏览器会解析不出压缩文件而报错）.例如
  

• Ⅲ，配置Nginx，开启gzip压缩，但是遇到gz后缀文件不在压缩直接丢给浏览器自己去解析，配置如下(该配置遇到gz后缀不会在压缩了)

  #Gzip Compression
  gzip on;
  gzip_static on;//开启静态文件压缩
  gzip_buffers 4 16k;//缓存区大小
  gzip_comp_level 9;//压缩程度，
  gzip_http_version 1.1;//http版本
  gzip_min_length 10k;//文件大小阈值，超过就开启gzip压缩
  gzip_proxied any;
  gzip_vary on;
  gzip_types gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
  gzip_disable "MSIE [1-6]\.";

• Ⅳ，打开浏览器的network，看到下面的Content-Encoding为gzip的表示通过了Nginx压缩。Content-Encoding不是gzip的的部分文件就是前端打包后的gz后缀文件，浏览器呈现出来的是把gz后缀文件解压后的。
  

2，babel-plugin-transform-remove-console

⑴目的:打包后的项目只会保留error和warn的console。

3，使用purifycss-webpack和purify-css对css进行tree shark

• (2)流程，

  • Ⅰ,通过npm i purifycss-webpack purify-css -D命令安装。

  • 例如vue-cli3.x的配置文件

    const glob = require('glob');
    const PurifyCssPlugin = require('purifycss-webpack');
    config.plugin('purifyCssPlugin').use(//css tree shark
      new PurifyCssPlugin({
        paths: glob.sync(path.join(__dirname, 'src/*.html'))
      })
    )

  • Ⅱ，打包后查看dist文件css目录下的css文件体积会减少很多