基于vue-cli3的webpack优化

先说优化内容与插件作用

• webpack-bundle-analyzer-增加可视化添加打包分析插件
• compression-webpack-plugin-gzip压缩
• terser-webpack-plugin-去除打印console.log
• image-webpack-loader-图片压缩 优化后，解析资源从2.11M减少到了1.31M(自己项目，比较小。其实优化的还是比较多的。)

增加analyz环境变量

• 官方增加环境变量教程
• 我这里在根目录内新建了个.env.analyz文件

NODE_ENV = 'production'
# 此文件.env.analyz 用于 webpack-bundle-analyzer 打包分析, 执行npm run analyz的时候生效， 对...进行分析的环境
VUE_APP_ENV = 'analyz'

VUE_APP_BASE_API = '/'

• package.json内增加

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "devtest": "cross-env TESTING=true  node build/dev-server.js",
    "test": "vue-cli-service test:unit",
    "analyz": "vue-cli-service build --mode analyz" //增加analyz环境
  },

webpack-bundle-analyzer

• vue.config.js添加打包分析

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); //是否生产环境
const IS_DEV = ["development", "dev"].includes(process.env.NODE_ENV); //是否开发环境
const IS_GZIP = true; //是否开启Gzip压缩

module.exports = {
  chainWebpack: config => {
    //webpack的可视化资源分析工具,只在analyz环境下生效
    process.env.VUE_APP_ENV === "analyz" &&
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }
}

compression-webpack-plugin

• gzip压缩

const CompressionWebpackPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
	if (IS_GZIP && IS_PROD) {
             //代码压缩
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
              new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                  '\\.(' + productionGzipExtensions.join('|') + ')$'
                ),
                threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                deleteOriginalAssets: false // 删除原文件
              })
            )
    }
}

terser-webpack-plugin去除打印

• 一开始用的uglifyjs-webpack-plugin这个，后来查阅发写不维护了。
• 所以还是推荐使用terser-webpack-plugin

//去除console.log
const TerserPlugin = require('terser-webpack-plugin')

configureWebpack: (config) => {
	if (IS_GZIP && IS_PROD) {
             //去除console
            config.plugins.push(
              new TerserPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
                terserOptions: {
                  compress: {
                    unused: true,// 删除无用的代码
					dead_code: true,// 移除无用的代码
					drop_console: true,
					drop_debugger: true
                  }
                }
              })
            )
    }
}

图片压缩

npm image-webpack-loader -D

  chainWebpack: config => {
    // 压缩图片
    config.module
      .rule("images")
      .test(/\.(gif|png|jpe?g|svg)$/i)
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        bypassOnDebug: true
      })
      .end();
  },

参考

参考