软件教程 2025年08月6日
0 收藏 0 点赞 903 浏览 2242 个字
摘要 :

文章目录 1.编译时缓存、多线程loader:cache-loader、thread-loader 2.压缩开启多线程插件:terser-webpack-plugin 3.对打包进行整体缓存的插件:hard-source-webpack-……




  • 1.编译时缓存、多线程loader:cache-loader、thread-loader
  • 2.压缩开启多线程插件:terser-webpack-plugin
  • 3.对打包进行整体缓存的插件:hard-source-webpack-plugin

本文主要讲解关于如何优化webpack打包速度相关内容,让我们来一起学习下吧!

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很像,但他们负责的工作是不一样的,提前说明一下:

  1. thread-loader是一个 loader 插件,它可以利用多核处理器的优势将单个 loader 的工作分配给多个线程执行。这对于 CPU 密集型的任务来说非常有用,因为它可以让多个处理器核心同时处理任务,从而显著缩短编译时间。
  2. 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
      }
    })]
}

以上就是关于如何优化webpack打包速度相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6593.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号