您现在的位置是:首页 > 正文

转译和编译_我是如何将 webpack 编译速度从 50S 优化到 7S

2024-04-01 04:36:59阅读 1

本篇文章主要记录下一次 webpack 的一次性能优化

现状

随着项目不断发展壮大,组件数量开始变得越来越多,项目也开始变得庞大,webpack 编译的时间也会越来越久,我们现在的项目编译一次在 40s ——70s 之间,这是一个效率非常低下的操作。优化的手段有很多,之前项目原本已经做了很多,本文从缓存的角度进行优化讲解

以下仅介绍几种缓存相关的优化手段,包括

  • babel-loadercacheDirectory
  • cache-loader
  • dll 动态链接库
  • HardSourceWebpackPlugin

先说结论,第一个是项目中已有的,第二第三个效果不大,第四个达到了预期的效果

我们的 webpack 版本:4.41.2,系统:mac os

瓶颈分析

优化的第一步,应该是分析目前的性能,这里我们使用 speed-measure-webpack-plugin 进行速度分析

// 安装
npm install --save-dev speed-measure-webpack-plugin
// 使用方式
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
const smp = new SpeedMeasurePlugin();
 
const webpackConfig = smp.wrap({
  plugins: [
    new MyPlugin(),
    new MyOtherPlugin()
  ]
});

结果类似如下,可以看到每一个 Loader 以及 Plugin 的耗时,有了这个,我们就可以“对症下药”

2d7f457b22269e0759f92611b367d507.png

但需要注意的是:HardSourceWebpackPlugin 和 speed-measure-webpack-plugin 不能一起使用,这一点让我郁闷了很久

babel-loader 的 cacheDirectory

babel-loader 允许使用 Babelwebpack 转译 JavaScript 文件,有时候如果我们运行 babel-loader 很慢的话,可以考虑确保转译尽可能少的文件。你可能使用 /\.m?js$/ 来匹配,这样有可能去转译 node_modules 目录或者其他不需要的源代码,导致性能下降

可以通过 exclude 排除掉一些不需要编译的文件。比如下面就不会去转义 node_modulesbower_components 文件夹下面的内容

module: {
     
  rules:

网站文章

  • 高性能计算实验三3 Pthreads 求解二次方程组的根

    高性能计算实验三3 Pthreads 求解二次方程组的根

    代码: #include #include #include #include int done=0; double a,b,c,d; double x1,x2; pthread_mutex_t m=PTHREAD_MUTEX_INITIALIZER; pthread_cond_t cond=PTHREAD_COND_INITIALIZER; void thr_..

    2024-04-01 04:36:11
  • LWZ压缩编码原理与C++实现

    LWZ压缩编码原理与C++实现

    LWZ编码原理LZW算法又叫“串表压缩算法,”就是通过建立一个字符串表,用较短的代码来表示较长的字符串来实现压缩,提取原始文本文件数据中的不同字符,基于这些字符创建一个编译表,然后用编译表中的字符的索引来替代原始文本文件数据中的相应字符,减少原始数据大小。编码流程步骤1:将词典初始化为包含所有可能的单字符,当前前缀P初始化为空。步骤2:当前字符C=字符流中的下一个字符。步骤3:判断P+C...

    2024-04-01 04:35:24
  • ajax给c foreach传值,如何使用下拉列表中选择的值过滤c:forEach给出的结果?

    以下是我的jsp代码。">上面的c:forEach清单Name CollName DeptNameABCD coll1 dept1kfkdb coll1 dept2jbdd coll2 dept3以下是分别列出collName和的代码deptNa...

    2024-04-01 04:35:17
  • git 拉取指定的远程分支(三种方式)

    直接拉取 git clone -b ants git@github.com:Ants-double/CareerJava.git git clone -b 远程分支名 仓库地址本地已经有相关的仓库代码//查看远程分支git branch -r//创建本地分支并关联git checkout -b 本地分支 origin/远程分支//已有本地分支创建关联git branch -...

    2024-04-01 04:35:10
  • 串行FIR滤波器

    串行FIR滤波器

    串行设计,就是在 16 个时钟周期内对 16 个延时数据分时依次进行乘法、加法运算,然后在时钟驱动下输出滤波值。考虑到 FIR 滤波器系数的对称性,计算一个滤波输出值的周期可以减少到 8 个。串行设计...

    2024-04-01 04:35:04
  • Visual Studio 秘钥

    Visual Studio 2015

    2024-04-01 04:34:23
  • win10小工具

    win10小工具

    clover给资源管理器加上标签页spacesniff图形化展示磁盘文件大小NDM下载工具

    2024-04-01 04:34:16
  • 常用正则表达式,持续更新

    常用正则表达式,手机号,身份证号,邮编

    2024-04-01 04:34:09
  • 使用swagger上传文件时,报错 Content type 'multipart/form-data;boundary=----WebKitFormBoundaryRAYPKeHKTYSNdzc1

    使用swagger上传文件时,传参包括一个文件类型的数据,和一个对象实体,上传时报错: "timestamp": 1473349676109, "status"...

    2024-04-01 04:33:30
  • 一文搞懂操作系统虚拟内存管理

    一文搞懂操作系统虚拟内存管理

    早期的计算机系统中,主存容量很小,虽然主存中仅存放一道用户程序,但是存储空间放不下用户进程的现象也经常发生。比如 IBM 推出的第一台PC机最大只支持 1MB 大小的内存。因此经常会出现内存大小不够的...

    2024-04-01 04:33:24