以前公司里有优化的时候,打包优化和代码优化都是他来办，好家伙现在只剩下我一人了，为了在公司站住脚特意去度娘那里请教了一番，发现并不是那么难，以下就是我webpack打包的最终极版，把10MB变成300KB不在话下。

 一，webpack配置

vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。

1，配置静态资源路径

module.exports = {
  publicPath: './', // 静态资源路径（默认/，打包后会白屏）
  outputDir: 'dist', // 打包后文件的目录 （默认为dist）
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录  默认为‘’没有单独目录js/css/img在根目录中。
  }

 2，去处生产环境

module.exports = {
  //去除生产环境的productionSourceMap
  productionSourceMap: false,
}

区别

• 如果没有去除环境变量的时候，打包运行代码如果报错的话会指向没有打包格式化的代码，去除了的话则恰恰相反，会指向打包格式化的代码。
• 去除前10MB，去除后3MB。大约减少整体代码的3/2。

3，使用CDN加速优化

在开发一个项目的时候我常常会用到一些插件比如说，vant，element，axios，vuex，等。

而这些插件呢，我们是直接下载到项目里的，再说了我又不在这些代码里修改，是完完全全的死代码，那我只要使用网络的请求来获取一下它们，岂不是美哉？

const isProduction = process.env.NODE_ENV === 'production';

// externals
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  vant: 'vant',
  axios: 'axios'
}
// CDN外链，会插入到index.html中
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: []
  },
 // 生产环境
  build: {
    css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
    ]
  }
}
module.exports = {
  configureWebpack: config => {
    // 为生产环境修改配置...
    if (isProduction) {
      // externals
      config.externals = externals
    }
  },
  chainWebpack: config => {
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    config.plugin('html').tap(args => {
      if (isProduction) {
        args[0].cdn = cdn.build
      } else {
        args[0].cdn = cdn.dev
      }
      return args
    })
  }
}

在 public/index.html 中添加

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
     <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

这个时候3MB又变成了1.5MB，缩小2/1

4，对资源文件进行压缩

需要下载 compression-webpack-plugin

cnpm i compression-webpack-plugin -D

vue.config.js 中按照如下方式进行配置

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

module.exports = {
  // 根据你的实际情况更改这里
  publicPath,
  assetsDir: 'assets',
  lintOnSave: true,
  configureWebpack: {
    plugins:[
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        // test: /\.js$|\.html$|\.json$|\.css/,
        test: /\.js$|\.json$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        // deleteOriginalAssets: true // 删除原文件
      })
    ],
  },
}

压缩后会减少一部分空间，后需要配合后端nginx修改，配合前端

nginx演示

location ~ .*\.(js|json|css)$ {
    gzip on;
    gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
    gzip_min_length 1k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types  text/css application/javascript application/json;
    root /dist;
}

后面看压缩包1.5MB减到700KB

5，减去控制台打印和备注

虽然减的不算多但是好歹是减了点，毕竟HR说能减就减1KB能有多少多少损失

需要下载uglifyjs-webpack-plugin

cnpm install uglifyjs-webpack-plugin --save-dev

在vue.config.js 中按照如下方式进行配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';

  configureWebpack: config => {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  },

700KB减到了650KB

5，图片压缩

图片的话，一般公司为了减少包的体积都是采用网上请求的，但是有一小部分仍然使用的是项目里的图片，那将不得不进行图片压缩了

需要下载 image-webpack-loader

cnpm install image-webpack-loader --save-dev

 在vue.config.js 中按照如下方式进行配置

module.exports = {
  // 根据你的实际情况更改这里
  publicPath,
  assetsDir: 'assets',
  lintOnSave: true,
  // image 压缩 定义在chainWebpack中
 chainWebpack: config => {
   config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()}
}

这回至少减原来图片3/2，650KB成300KB

如有不足之处，还请多多指教！