自己项目上用的，记录一下，又能水一篇，嘿嘿~
1.编译时缓存、多线程loader：cache-loader、thread-loader
cache-loader用于避免项目资源的重复构建，如项目中的ts、tsx资源，在用babel-loader或者vue-loader编译前，先用cache-loader预处理一下，如果有缓存匹配的情况，则无需后面的loader对已有模块进行重复编译
配置方法：
npm i cache-loader thread-loader
// vue.config.js
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /.(js|jsx)$/,
include: [path.resolve('src')],
use: ['cache-loader', 'thread-loader', 'babel-loader']
}
]
},
}
这里安装了thread-loader是一个多线程打包工具，与后面的terser-webpack-plugin很像，但他们负责的工作是不一样的，提前说明一下：
thread-loader是一个 loader 插件，它可以利用多核处理器的优势将单个 loader 的工作分配给多个线程执行。这对于 CPU 密集型的任务来说非常有用，因为它可以让多个处理器核心同时处理任务，从而显著缩短编译时间。terser-webpack-plugin是一个 webpack 插件，用于压缩和最小化 JavaScript 文件。它使用 TerserJS 来分析并优化代码，减小文件大小，从而使网站加载速度更快。综上所述，两者都是有用的工具，但在不同方面发挥作用。
thread-loader主要用于加速构建过程，而terser-webpack-plugin用于压缩代码，加快页面加载速度。建议在使用 webpack 构建时，结合二者，先使用thread-loader加速构建过程，再使用terser-webpack-plugin压缩代码，从而提高整体性能。
2.压缩开启多线程插件：terser-webpack-plugin
terser-webpack-plugin的作用已在上述说明，下面只写我做的配置
// vue.config.js
const TerserPlugin = require("terser-webpack-plugin");
const os = require("os");
// 获取cpu核数
const threads = os.cpus().length;
module.exports = {
optimization: {
minimizer: [
// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
new TerserPlugin({
parallel: threads // 开启多进程
})
]
}
}
3.对打包进行整体缓存的插件：hard-source-webpack-plugin
hard-source-webpack-plugin 是一个 webpack 插件，它可以缓存模块、chunk 和模板，以便在后续构建中重用它们，从而加速 webpack 构建速度。它是通过创建一个映射表（map）来实现这一目标的，该映射表记录了模块及其输出位置之间的关系。当需要再次编译模块时，它可以从映射表中查找，而不是重新编译整个应用程序。通过这种方式，它减少了不必要的编译开销，并提高了构建速度，下面是我做的配置。
// vue.config.js
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
module.exports = {
chainWebpack: (config) => {
config.cache = {
type: 'filesystem',
allowCollectingMemory: true
}
},
plugins: isProduction ? [compress, defer, new HardSourceWebpackPlugin({
environmentHash: {
root: process.cwd(),
directories: [],
// 设置要追踪的依赖，一旦发生变化将重新构建缓存包
files: ['package-lock.json', '.env.test', 'package.json']
},
// 清除旧的缓存
cachePrune: {
// 设置清除超过一个月的缓存，防止占用硬盘过大
maxAge: 30 * 24 * 60 * 60 * 1000
}
})]
}
PS：万万没想到，测试环境好好的，hard-source-webpack-plugin这个插件在线上环境不给开辟线程的权利，也有可能是给分配的内存太小了，总之各种报错，就没法用了，于是有了下面追加的优化方式
4.使用autodll-webpack-plugin进行动态链接库优化
- 缓存机制：将一些不经常变化的模块（例如第三方库）提前编译成一个或多个单独的 DLL（动态链接库），并缓存这些 DLL，以加速后续的构建。这样，只有在 DLL 变化时才需要重新构建。
autodll-webpack-plugin主要用于对第三方库等不经常改变的模块进行优化，以减少构建时间。它适用于项目中引入的较大的依赖模块，但不太适合频繁变动的业务逻辑代码。
配置代码：
// vue.config.js
const AutoDllPlugin = require('autodll-webpack-plugin'); // 第 1 步：引入 DLL 自动链接库插件
module.exports = {
configureWebpack: {
plugins:[new AutoDllPlugin({
inject: true, // 设为 true 就把 DLL bundles 插到 index.html 里
filename: '[name].dll.js',
context: path.resolve(__dirname, './'), // AutoDllPlugin 的 context 必须和 package.json 的同级目录，要不然会链接失败
entry: {
vendor: ['vue', 'echarts', 'axios', 'ofd.js', 'pdfjs-dist', 'vant', 'vue-router', 'core-js','vue-virtual-scroll-list', 'zrender', 'vue-baidu-map', 'vuex', 'moment', 'hammerjs','pdfjs-dist-sign']
}
})]
}
}
虽然比不上hard-source-webpack-plugin能把打包时间缩减到二十多秒，但是也勉强可以接受。。。
