webpack项目开发完后，如何优化打包速度？

Gzip压缩

前端页面文件缓存

我们先来简单回顾下 http 缓存的知识：

• HTTP1.0 是通过Expires（文件过期时间）和Last-Modified（最近修改时间）来告诉浏览器进行缓存的，这两个字段都是 UTC 时间（绝对时间）。Expires 过期控制不稳定，因为浏览器端可以随意修改本地时间，导致缓存使用不精准。而且 Last-Modified 过期时间只能精确到秒。
• HTTP1.1 通过Cache-Contorl和 Etag（版本号）进行缓存控制。浏览器先检查 Cache-Control，如果有，则以Cache-Control 为准，忽略Expires。如果没有 Cache-Control，则以Expires 为准。

Cache-Control 除了可以设置 max-age（相对过期时间，以秒为单位）以外，还可以设置如下几种常用值:

• public，资源允许被中间服务器缓存。浏览器请求服务器时，如果缓存时间没到，中间服务器直接返回给浏览器内容，而不必请求源服务器。
• private，资源不允许被中间代理服务器缓存。浏览器请求服务器时，中间服务器都要把浏览器的请求透传给服务器。
• no-cache，不管本地副本是否过期，每次访问资源，浏览器都要向服务器询问，如果文件没变化，服务器只告诉浏览器继续使用缓存（304）。
• no-store，浏览器和中间代理服务器都不能缓存资源。每次访问资源，浏览器都必须请求服务器，并且，服务器不去检查文件是否变化，而是直接返回完整的资源。
• must-revalidate，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。
• proxy-revalidate，要求代理服务器针对缓存资源向源服务器进行确认。
• s-maxage：缓存服务器对资源缓存的最大时间。

现在 99%的浏览器都是 HTTP1.1 及以上版本，我们配置缓存就使用 Cache-Contorl 和 Etag 配合就好了。

服务器配置缓存

文件名带 hash 的(即 css、js、font 和 img 目录下的所有文件)设置一个月缓存，浏览器可以直接使用缓存不需要请求服务器。其他的文件（index.html 和 static 目录下的文件）设置为 no-cache，即每次都来服务器检查是否最新。nginx 配置如下：

server {
    location = /index.html {
        add_header Cache-Control no-cache;
    }

    location ~ /static/ {
        add_header Cache-Control no-cache;
    }

    location ~ /(js/_|css/_|img/_|font/_) {
        expires 30d;
        add_header Cache-Control public;
    }
}

前端文件设置 gzip 压缩

首先需要安装一个 webpack 插件，作用是将大文件压缩成 gzip 的格式。执行一下命令进行安装：

npm install --save-dev compression-webpack-plugin

安装成功后，在 vue.config.js 进行配置，配置如下：

const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 可加入需要的其他文件类型，比如json
// 图片不要压缩，体积会比原来还大
const productionGzipExtensions = ["js", "css"];

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            // filename: '[path].gz[query]',
            algorithm: "gzip",
            test: new RegExp(
              "\\.(" + productionGzipExtensions.join("|") + ")$"
            ),
            threshold: 10240, //对超过10k的数据进行压缩
            minRatio: 0.6, // 压缩比例，值为0 ~ 1
          }),
        ],
      };
    }
  },
};

这样配置后，打包完的 js 和 css 文件就多了后缀名为 gz 的文件，下面是是否开启 gzip 压缩的文件大小对比：

File	Size	Gzipped
dist\static\lib\echarts.4.0.6.min.js	729.99KB	243.57KB
dis\static\lib\jquery.3.3.1.min.js	84.89KB	29.65KB
dist\js\chuck-vendors.41428558.js	2316.10KB	623.74KB
dist\js\app.aea87398.js	1701.24KB	447.00KB
dist\css\app.c6e9f88a.css	464.43KB	137.84KB
dist\css\chunk-vendors.aa340280.css	263.42KB	38.56KB

服务器配置 gzip 压缩

Nginx 服务器的配置文件 nginx.conf 的 http 模块：

server {
  # 开启gzip on为开启，off为关闭
  gzip on;
  # 检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容，不存在则先压缩再返回
  gzip_static on;
  # 设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。
  # 默认值是0，不管页面多大都压缩。
  # 建议设置成大于10k的字节数，配合compression-webpack-plugin
  gzip_min_length 10k;
  # 对特定的MIME类型生效,其中'text/html’被系统强制启用
  gzip_types text/javascript application/javascript text/css application/json;
  # Nginx作为反向代理的时候启用，开启或者关闭后端服务器返回的结果
  # 匹配的前提是后端服务器必须要返回包含"Via"的 header头
  # off(关闭所有代理结果的数据的压缩)
  # expired(启用压缩,如果header头中包括"Expires"头信息)
  # no-cache(启用压缩,header头中包含"Cache-Control:no-cache")
  # no-store(启用压缩,header头中包含"Cache-Control:no-store")
  # private(启用压缩,header头中包含"Cache-Control:private")
  # no_last_modefied(启用压缩,header头中不包含"Last-Modified")
  # no_etag(启用压缩,如果header头中不包含"Etag"头信息)
  # auth(启用压缩,如果header头中包含"Authorization"头信息)
  # any - 无条件启用压缩
  gzip_proxied any;
  # 请求加个 vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩
  gzip_vary on;
  # 同 compression-webpack-plugin 插件一样，gzip压缩比（1~9），
  # 越小压缩效果越差，但是越大处理越慢，一般取中间值
  gzip_comp_level 6;
  # 获取多少内存用于缓存压缩结果，‘16  8k’表示以8k*16 为单位获得。
  # PS: 如果没有.gz文件，是需要Nginx实时压缩的
  gzip_buffers 16 8k;
  # 注：99.99%的浏览器基本上都支持gzip解压了，所以可以不用设这个值,保持系统默认即可。
  gzip_http_version 1.1;
}

配置完 nginx 然后进行重启，如果此时发现报错信息是 unknown directive "gzip_static" ，意味着 nginx 没有安装该模块，解决办法如下： 进入到 nginx 安装目录，执行以下命令：
进入到 nginx 安装目录，执行以下命令：

./configure --with-http_gzip_static_module

然后执行：

make && make install

关闭 nginx：

systemctl stop nginx

启动 nginx：

systemctl start nginx

检查 gzip 是否生效

浏览器文件请求的请求头包含字段 Accept-Encoding: gzip 代表浏览器支持 gzip 压缩文件，文件响应头包含字段 Content-Encoding: gzip 代表返回的是压缩文件。

上面 nginx 配置 gzip_static on; 当我们不在 nginx 开启 gzip_static 的时候，发现生产的 gz 文件并没有被运行。gzip_static 是会自动执行 gz 文件的，这样的就避免了通过 gzip 自动压缩。换句话说，开启之后 nginx 会优先使用我们的 gz 文件。

如果 nginx 使用了已有的 gz 文件，那么这个请求的 etag 值不带有 W/，反之，如果文件是 nginx 压缩的，etag 值则会带有 W/。我们以刚才罗列的 app.aea87398.js 为例，下面是 Response Headers ：

Cache-Control: max-age=2592000
Cache-Control: public
Content-Encoding: gzip
Content-Length: 455941
Content-Type: application/javascript
Date: Thu, 06 Aug 2020 03:17:24 GMT
Etag: "5f2b6d5e-6f505"
Expires: Sat, 05 Sep 2020 03:17:24 GMT
Last-Modified: Thu, 06 Aug 2020 02:39:26 GMT
Server: nginx/1.9.9
Vary: Accept-Encoding

会发现 Etag 的值为"5f2b6d5e-6f505" ，该值不以 W/ 开头，则意味着使用了我们自己打包生成的 gz 文件。

webpack性能优化

体积分析

经过webpack 打包后的体积优化是一个很重要的点，比如引入的第三方库是否过大，能否对体积过大的库进行优化。此时需要用到一款插件，叫做webpack-bundle-analyzer 。它可以用交互式可缩放树形图显示webpack输出文件的大小，用起来非常的方便。
首先安装插件：
npm install --save-dev webpack-bundle-analyzer
然后在vue.config.js 中引入：

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

然后npm run serve 启动项目，此时会默认启动 http://127.0.0.1:8888，页面里可以清晰的查看包占比的大小。建议只在开发环境启用，生产环境采用默认配置会打包失败。以tieshangongzhu 项目为例，打包结果中占比比较大的第三方库包括：iview.js 、moment.js 、lodash.js 等。下面介绍如何优化这些大的资源。

体积优化

这里介绍支持按需引入的babel 插件babel-plugin-import ，用来优化lodash 。

首先安装插件：
npm install babel-plugin-import --save-dev
然后在babel.config.js 中的plugins 数组中添加一下配置：
["import", { libraryName: "lodash", libraryDirectory: "" }];
通过上述配置就完成了lodash 的按需加载。
接着我们来优化moment ，通过分析页面查看可知，moment 很大部分占比是语言包，但我们基本用不到，于是我们可以借助webpack自带的插件来忽略语言包。配置如下：
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)];
通过上述配置即可去除语言包，减少大概 70%的大小。

多进程构建

大家都知道 webpack 是运行在 node 环境中，而 node 是单线程的。webpack 的打包过程是 io 密集和计算密集型的操作，如果能同时 fork 多个进程并行处理各个任务，将会有效的缩短构建时间。
这里采用thread-loader 进行多进程构建。
首先安装loader ：
npm install --save-dev thread-loader
然后在vue.config.js 添加如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["thread-loader", "babel-loader"],
      },
    ],
  },
};

然后执行npm run build ，统计打包时长。通过对比会发现，引入前打包耗时 37s，引入后打包耗时 18s。速度有了一倍的提升。通过查看可选项配置：

options: {
      // the number of spawned workers, defaults to (number of cpus - 1) or
      // fallback to 1 when require('os').cpus() is undefined
      workers: 2,

      // number of jobs a worker processes in parallel
      // defaults to 20
      workerParallelJobs: 50,

      // additional node.js arguments
      workerNodeArgs: ['--max-old-space-size=1024'],

      // Allow to respawn a dead worker pool
      // respawning slows down the entire compilation
      // and should be set to false for development
      poolRespawn: false,

      // timeout for killing the worker processes when idle
      // defaults to 500 (ms)
      // can be set to Infinity for watching builds to keep workers alive
      poolTimeout: 2000,

      // number of jobs the poll distributes to the workers
      // defaults to 200
      // decrease of less efficient but more fair distribution
      poolParallelJobs: 50,

      // name of the pool
      // can be used to create different pools with elsewise identical options
      name: "my-pool"
    }

可以看到，默认是启用cpus - 1 个worker 来实现多进程打包。

多进程并行压缩代码

上面我们提到了多进程打包，接下来应用一下可以并行压缩JavaScript 代码的插件。

webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再应用各种规则分析和处理AST，导致这个过程耗时非常大)。

这里介绍一款可以并行压缩代码的插件：terser-webpack-plugin 。

首先安装插件：
npm install terser-webpack-plugin --save-dev
然后在vue.config.js 中添加配置，注意该配置位于configureWebpack 下，并且建议在生产环境开启。

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            parallel: true,
            terserOptions: {
                output: {
                    comments: false, // remove comments
                },
                compress: {
                    warnings: false,
                    drop_console: true,
                    drop_debugger: true,
                    pure_funcs: ['console.log'], // remove console.log
                },
            },
            extractComments: false,
        }),
    ],
},

按照上述配置后，即可开启并行压缩 js 代码的功能。需要注意的是，V8 在系统上有内存的限制，默认情况下，32 位系统限制为 512M，64 位系统限制为 1024M。因为如果不加以限制，大型项目构建的时候可能会出现内存溢出的情况。也就是说，可能无法开启并行压缩的功能。但是压缩代码的功能还是可以正常使用的。

利用缓存提升二次构建速度

这里讨论下在webpack中如何利用缓存来提升二次构建速度。

在webpack中利用缓存一般有以下几种思路：

• babel-loader开启缓存
• 使用cache-loader
• 使用hard-source-webpack-plugin
  这里重点介绍下第三种。HardSourceWebpackPlugin 为模块提供了中间缓存，缓存默认的存放路是: node_modules/.cache/hard-source。

配置 hard-source-webpack-plugin后，首次构建时间并不会有太大的变化，但是从第二次开始，构建时间大约可以减少 80%左右。

首先安装插件：

npm install --save-dev hard-source-webpack-plugin

然后在vue.config.js 中添加配置，建议配置在开发环境，生产环境可能没有效果。

module.exports = {
  plugins: [new HardSourceWebpackPlugin()],
};

在第二次执行npm run serve 后，可以看到终端会有以下字样：

[hardsource:5e5f2c56] Using 144 MB of disk space.
[hardsource:5e5f2c56] Tracking node dependencies with: package-lock.json.
[hardsource:5e5f2c56] Reading from cache 5e5f2c56...

也就意味着构建从硬盘中读取缓存，加快了构建速度。

缩小构建目标

主要是exclude 与 include的使用：

• exclude: 不需要被解析的模块
• include: 需要被解析的模块
  用的比较多的是排除/node_modules/ 模块。需要注意的是，exclude 权重更高，exclude 会覆盖 include 里的配置。

减少文件搜索范围

这个主要是resolve相关的配置，用来设置模块如何被解析。通过resolve的配置，可以帮助Webpack快速查找依赖，也可以替换对应的依赖。

• resolve.modules：告诉 webpack 解析模块时应该搜索的目录
• resolve.mainFields：当从 npm 包中导入模块时（例如，import * as React from 'react'），此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同，默认值也会有所不同
• resolve.mainFiles：解析目录时要使用的文件名，默认是index
• resolve.extensions：文件扩展名

resolve: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react/umd/react.production.min.js')
    }, //直接指定react搜索模块，不设置默认会一层层的搜寻
    modules: [path.resolve(__dirname, 'node_modules')], //限定模块路径
    extensions: ['.js'], //限定文件扩展名
    mainFields: ['main'] //限定模块入口文件名
}

预编译资源模块

在使用webpack进行打包时候，对于依赖的第三方库，比如vue，vuex等这些不会修改的依赖，我们可以让它和我们自己编写的代码分开打包，这样做的好处是每次更改本地代码的文件的时候，webpack只需要打包项目本身的文件代码，而不会再去编译第三方库。

那么第三方库在第一次打包的时候只打包一次，以后只要我们不升级第三方包的时候，那么webpack就不会对这些库去打包，这样的可以快速的提高打包的速度。其实也就是预编译资源模块。

webpack中，我们可以结合DllPlugin 和 DllReferencePlugin插件来实现。

DllPlugin 是什么

DLLPlugin 插件是在一个额外独立的webpack设置中创建一个只有dll的bundle，也就是说我们在项目根目录下除了有vue.config.js，还会新建一个webpack.dll.config.js文件。

webpack.dll.config.js的作用是把所有的第三方库依赖打包到一个bundle的dll文件里面，还会生成一个名为 manifest.json文件。该manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去的。

DllReferencePlugin 又是什么

这个插件是在vue.config.js中使用的，该插件的作用是把刚刚在webpack.dll.config.js中打包生成的dll文件引用到需要的预编译的依赖上来。

什么意思呢？就是说在webpack.dll.config.js中打包后比如会生成 vendor.dll.js文件和vendor-manifest.json文件，vendor.dll.js文件包含了所有的第三方库文件，vendor-manifest.json文件会包含所有库代码的一个索引，当在使用vue.config.js文件打包DllReferencePlugin插件的时候，会使用该DllReferencePlugin插件读取vendor-manifest.json文件，看看是否有该第三方库。

vendor-manifest.json文件就是一个第三方库的映射而已。

话不多说，接下来看看怎么应用到项目中。

首先我们来编写webpack.dll.config.js 文件，内容如下：

const webpack = require("webpack");
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "production",
  entry: {
    vendor: [
      "vue/dist/vue.runtime.esm.js",
      "vuex",
      "vue-router",
      "vue-resource",
      "iview",
    ], // 这里是vue项目依赖的库
    util: ["lodash", "jquery", "moment"], // 这里是与框架无关的第三方库
  },
  output: {
    filename: "[name].dll.js",
    path: path.resolve(__dirname, "dll"),
    library: "dll_[name]",
  },
  plugins: [
    new CleanWebpackPlugin(), // clean-webpack-plugin目前已经更新到2.0.0，不需要传参数path
    new webpack.DllPlugin({
      name: "dll_[name]",
      path: path.join(__dirname, "dll", "[name].manifest.json"),
      context: __dirname,
    }),
  ],
};

在项目根目录上新建webpack.dll.config.js ，填写以上内容，同时还需要安装CleanWebpackPlugin ，步骤省略。

然后我们需要运行命令将第三方库打包到dll 文件夹下，该文件夹位于项目根目录。

执行命令如下：
webpack --config ./webpack.dll.config.js
执行上述命令时如果提示Do you want to install 'webpack-cli' (yes/no) ，输入yes 进行安装webpack-cli 。成功后会发现项目根目录生成dll 文件夹。文件夹下包含：
-util.dll.js - util.manifest.json - vendor.dll.js - vendor.manifest.json;
为了生成dll 文件夹方便，在package.json里面再添加一条脚本：

"scripts": {
    "build:dll": "webpack --config ./webpack.dll.config.js",
},

以后就可以执行npm run build:dll来生成 了。

接下来需要在vue.config.js 中添加以下代码：

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); // 如果未安装请先安装


const dllReference = (config) => {
    config.plugin('vendorDll')
        .use(webpack.DllReferencePlugin, [{
            context: __dirname,
            manifest: require('./dll/vendor.manifest.json'),
        }]);


    config.plugin('utilDll')
        .use(webpack.DllReferencePlugin, [{
            context: __dirname,
            manifest: require('./dll/util.manifest.json'),
        }]);


    config.plugin('addAssetHtml')
        .use(AddAssetHtmlPlugin, [ // add-asset-html-webpack-plugin插件必须在html-webpack-plugin之后使用，因此这里要用webpack-chain来进行配置
            [
                {
                    filepath: require.resolve(path.resolve(__dirname, 'dll/vendor.dll.js')),
                    outputPath: 'dll',
                    publicPath: '/dll', // 这里的公共路径与项目配置有关，如果顶层publicPath下有值，请添加到dll前缀
                },
                {
                    filepath: require.resolve(path.resolve(__dirname, 'dll/util.dll.js')),
                    outputPath: 'dll',
                    publicPath: '/dll', // 这里的公共路径与项目配置有关，如果顶层publicPath下有值，请添加到dll前缀
                },
            ],
        ])
        .after('html'); // 'html'代表html-webpack-plugin，是因为@vue/cli-servide/lib/config/app.js里是用plugin('html')来映射的
};


module.exports = {
    publicPath: '/', // 顶层publiePath在这里
    chainWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') { // 在开发环境中不使用dllPlugin是因为chrome的vue devtool是不能检测压缩后的vue源码，不方便代码调试
            dllReference(config);
        }
    }

Vue项目引入tailwind.css

安装

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

由于项目中依赖的组件库的postCSS版本是7.X，使用npm install tailwindcss安装的版本依赖postCSS的8.X，因此需要安装指定版本。

配置

npx tailwindcss init -p

通过执行以上命令来生成tailwind.config.js和postcss.config.js，如果项目中存在postcss.config.js，则只生成前者，不会覆盖已有配置文件。
tailwind.config.js位于项目的根目录，默认配置如下：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

修改postcss.config.js配置：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

引入

在项目的公共CSS文件中添加如下配置，Tailwind将在构建时将这些指令替换为基于配置的设计系统生成的所有样式：

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

请务必添加诡异的注释/*! @import */，避免在开发过程中Chrome DevTools中的性能问题。 最后在./src/main.js中引入css文件即可。

自定义

一般来说，开发过程中使用最多的无外乎padding 、margin、width、height等属性，这些属性有一个共性就是需要指定具体的值。tailwind.config.js可以在theme下指定特殊的值来覆盖默认值。

// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      borderWidth: {
        default: '1px',
        '0': '0',
        '2': '2px',
        '4': '4px',
      },
      spacing: {
        '5': '5px',
        '10': '10px',
        '15': '15px',
        '20': '20px',
        '25': '25px',
        '30': '30px',
      },
      colors: {
        'gray-border': "#e8e8e8",
        'gray-disabled': "#c5c8ce",
        'gray-background': "#f8f8f9",
        'blue-text': "rgba(25,118,253,.85)",
        'blue-primary': "#3B91FF",
        'blue-info': "#2db7f5",
        'green-success': "#19be6b",
        'yellow-warning': "#ff9900",
        'red-error': "#ed4014",
        'black-title': '#17233d',
        'black-content': '#515a6e'
      },
    },
  },
  plugins: [],
  prefix: 'tw-',
  important: false, // Tailwind with existing CSS that has high specificity selectors
}

以上配置是目前项目中暂时用到的自定义值。

优势

• 不用想破脑袋的去给class命名，不用给诸如只需要声明flex样式来增加一个class。
• css文件不再增长。使用tailwind，所有内容都是可重用的，因此几乎不需要编写新的CSS。
• 更安全的变更，css是全局性的，容易引发冲突；而class是局部的，不需要担心会产生冲突。

与内联样式相比，有以下优点：

• 有约束的设计。使用内联样式，每个值都是一个魔术数字。使用Tailwind，可以从预定义的设计系统中选择样式，这将使构建外观一致的UI变得更加容易。
• 响应式设计。不能以内联样式使用媒体查询，但是可以使用Tailwind的响应实用程序轻松构建完全响应的界面。
• 伪类。内联样式无法定位诸如悬停或焦点之类的状态，但是Tailwind的伪类变体使使用实用程序类对这些状态进行样式设置变得容易。

vue.config.js代码

/**
 * 配置参考: https://cli.vuejs.org/zh/config/
 */
const Timestamp = new Date().getTime()
var path = require("path");
// var webpack = require("webpack");
// 压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 自定义配置插件
const TerserPlugin = require('terser-webpack-plugin')
//获取绝对地址
function resolve(dir) {
  return path.join(__dirname, dir);
}
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  runtimeCompiler: true,
  lintOnSave: false,
  productionSourceMap: false,
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  chainWebpack: (config) => {
    // // ============压缩图片 start============
    // if (process.env.NODE_ENV === 'production') {
    //   config.module
    //     .rule('images')
    //     .use('image-webpack-loader')
    //     .loader('image-webpack-loader')
    //     .options({ bypassOnDebug: true })
    //     .end()
    //   // ============压缩图片 end============
    //   config.plugins.delete('prefetch') // vue-cli3.0   加上这行才能按需加载  移除 prefetch 插件
    //   // 移除 preload 插件
    //   config.plugins.delete('preload')
    //   // 压缩代码
    //   config.optimization.minimize(true)
    //   // 分割代码
    //   config.optimization.splitChunks({
    //     chunks: 'initial', // async异步代码分割 initial同步代码分割 all同步异步分割都开启
    //     minSize: 30000, // 字节 引入的文件大于30kb才进行分割
    //     // maxSize: 50000,         //50kb，尝试将大于50kb的文件拆分成n个50kb的文件
    //     minChunks: 1, // 模块至少使用次数
    //     maxAsyncRequests: 5, // 同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
    //     maxInitialRequests: 3, // 首页加载的时候引入的文件最多3个
    //     automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符
    //     name: true, // 缓存组里面的filename生效，覆盖默认命名
    //     cacheGroups: { // 缓存组，将所有加载模块放在缓存里面一起分割打包
    //       vendors: { // 自定义打包模块
    //         test: /[\\/]node_modules[\\/]/,
    //         priority: -10, // 优先级，先打包到哪个组里面，值越大，优先级越高
    //         filename: 'vendors.js'
    //       },
    //       default: { // 默认打包模块
    //         priority: -20,
    //         reuseExistingChunk: true, // 模块嵌套引入时，判断是否复用已经被打包的模块
    //         filename: 'common.js'
    //       }
    //     }
    //   })
    // }

    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
    config.module.rule("thread")
      .test(/\.js$/)
      .exclude.add(resolve("/node_modules/"))
      .end()
      .use("thread-loader")
      .loader("thread-loader")
      .end()
      .use("babel-loader")
      .loader("babel-loader")
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "[name]",
      })
      .end();
    config.module
      .rule("js")
      .include.add(/src/)
      .add(/test/)
      .add(/node_modules\/npm-lifecycle\/node-gyp-bin/)
      .add(/node_modules\/@wangeditor/)
      .end();
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // webpack 配置
      config.plugins.push(
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.map$|\.css$/,
          // 超过4kb压缩
          threshold: 4096,
          deleteOriginalAssets: true, // 删除原始文件
        })
      )
      config.plugins.push(
        new TerserPlugin({
          terserOptions: {
            // 自动删除console
            compress: {
              // warnings: false, // 若打包错误，则注释这行
              drop_debugger: true,
              drop_console: true,
              pure_funcs: ['console.log']
            }
          },
          cache: true,
          sourceMap: false,
          parallel: true
        })
      )
      config.output.filename = `[name].${Timestamp}.js`
      config.output.chunkFilename = `[name].${Timestamp}.js`
    } else {
      config.devtool = 'source-map'
    }
  },
  css: {
    loaderOptions: {
      // 没有分号会报错
      sass: {
        sourceMap: true,
        additionalData: `
          @import "@/assets/scss/variables.scss";
        `,
      },
    },
  },
  productionSourceMap: false,
  devServer: {
    port: 8002,
    proxy: {
      "/api": {
        target: "http://192.168.5.23:8408/api",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
});