webpack基础知识九:如何提高webpack的构建速度?

这篇具有很好参考价值的文章主要介绍了webpack基础知识九:如何提高webpack的构建速度?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

webpack基础知识九:如何提高webpack的构建速度?,webpack,前端,node.js
一、背景

随着我们的项目涉及到页面越来越多,功能和业务代码也会随着越多,相应的 webpack 的构建时间也会越来越久

构建时间与我们日常开发效率密切相关,当我们本地开发启动 devServer 或者 build 的时候,如果时间过长,会大大降低我们的工作效率

所以,优化webpack 构建速度是十分重要的环节

二、如何优化

常见的提升构建速度的手段有如下:

  • 优化 loader 配置
  • 合理使用 resolve.extensions
  • 优化 resolve.modules
  • 优化 resolve.alias
  • 使用 DLLPlugin 插件
  • 使用 cache-loader
  • terser 启动多线程
  • 合理使用 sourceMap

优化loader配置

在使用loader时,可以通过配置include、exclude、test属性来匹配文件,接触include、exclude规定哪些匹配应用loader

如采用 ES6 的项目为例,在配置 babel-loader时,可以这样:

module.exports = {
  module: {
    rules: [
      {
        // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/,提升正则表达式性能
        test: /\.js$/,
        // babel-loader 支持缓存转换出的结果,通过 cacheDirectory 选项开启
        use: ['babel-loader?cacheDirectory'],
        // 只对项目根目录下的 src 目录中的文件采用 babel-loader
        include: path.resolve(__dirname, 'src'),
      },
    ]
  },
};

合理使用 resolve.extensions

在开发中我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库, resolve可以帮助webpack从每个 require/import 语句中,找到需要引入到合适的模块代码

通过resolve.extensions是解析到文件时自动添加拓展名,默认情况如下:

module.exports = {
    ...
    extensions:[".warm",".mjs",".js",".json"]
}

当我们引入文件的时候,若没有文件后缀名,则会根据数组内的值依次查找

当我们配置的时候,则不要随便把所有后缀都写在里面,这会调用多次文件的查找,这样就会减慢打包速度

优化 resolve.modules

resolve.modules 用于配置 webpack 去哪些目录下寻找第三方模块。默认值为[‘node_modules’],所以默认会从node_modules中查找文件 当安装的第三方模块都放在项目根目录下的 ./node_modules目录下时,所以可以指明存放第三方模块的绝对路径,以减少寻找,配置如下:

module.exports = {
  resolve: {
    // 使用绝对路径指明第三方模块存放的位置,以减少搜索步骤
    // 其中 __dirname 表示当前工作目录,也就是项目根目录
    modules: [path.resolve(__dirname, 'node_modules')]
  },
};

优化 resolve.alias

alias给一些常用的路径起一个别名,特别当我们的项目目录结构比较深的时候,一个文件的路径可能是./…/…/的形式

通过配置alias以减少查找过程

module.exports = {
    ...
    resolve:{
        alias:{
            "@":path.resolve(__dirname,'./src')
        }
    }
}

使用 DLLPlugin 插件

DLL全称是 动态链接库,是为软件在winodw种实现共享函数库的一种实现方式,而Webpack也内置了DLL的功能,为的就是可以共享,不经常改变的代码,抽成一个共享的库。这个库在之后的编译过程中,会被引入到其他项目的代码中

使用步骤分成两部分:

  • 打包一个 DLL 库
  • 引入 DLL 库

打包一个 DLL 库

webpack内置了一个DllPlugin可以帮助我们打包一个DLL的库文件

module.exports = {
    ...
    plugins:[
        new webpack.DllPlugin({
            name:'dll_[name]',
            path:path.resolve(__dirname,"./dll/[name].mainfest.json")
        })
    ]
}

#引入 DLL 库

使用 webpack 自带的 DllReferencePlugin 插件对 mainfest.json 映射文件进行分析,获取要使用的DLL库

然后再通过AddAssetHtmlPlugin插件,将我们打包的DLL库引入到Html模块中

odule.exports = {
    ...
    new webpack.DllReferencePlugin({
        context:path.resolve(__dirname,"./dll/dll_react.js"),
        mainfest:path.resolve(__dirname,"./dll/react.mainfest.json")
    }),
    new AddAssetHtmlPlugin({
        outputPath:"./auto",
        filepath:path.resolve(__dirname,"./dll/dll_react.js")
    })
}

使用 cache-loader

在一些性能开销较大的 loader之前添加 cache-loader,以将结果缓存到磁盘里,显著提升二次构建速度

保存和读取这些缓存文件会有一些时间开销,所以请只对性能开销较大的 loader 使用此loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.ext$/,
                use: ['cache-loader', ...loaders],
                include: path.resolve('src'),
            },
        ],
    },
};

terser 启动多线程

使用多进程并行运行来提高构建速度

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
};

合理使用 sourceMap

打包生成 sourceMap 的时候,如果信息越详细,打包速度就会越慢。对应属性取值如下所示:

webpack基础知识九:如何提高webpack的构建速度?,webpack,前端,node.js
+++ 非常快速,++ 快速,+ 比较快,o 中等,- 比较慢, – 慢

三、总结

可以看到,优化webpack构建的方式有很多,主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手文章来源地址https://www.toymoban.com/news/detail-632729.html

到了这里,关于webpack基础知识九:如何提高webpack的构建速度?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack基础知识六:说说webpack的热更新是如何做到的?原理是什么?

    一、是什么 HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用 例如,我们在应用运行过程中修改了某个模块,通过自动刷新会导致整个应用的整体刷新,那页面中的状态信息都会丢失 如果使用的

    2024年02月13日
    浏览(40)
  • webpack基础知识

    webpack的本质是一个第三方模块包,用于分析,并打包代码 支持所有类型的文件打包 支持less/sass= css 支持ES6/7/8=ES5 压缩代码,提高加载速度 yarn安装 配置环境变量 验证 配置scripts 需求 两个js文件打包成一个js文件 index.js add.js 打包命令 在对应src目录下

    2024年02月13日
    浏览(38)
  • webpack基础知识十:与webpack类似的工具还有哪些?区别?

    一、模块化工具 模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割,组织和打包应用。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体(bundle) 在前端领域中,并非只有webpack这一款优秀的模块打包工具,还有其他类似的

    2024年02月13日
    浏览(34)
  • webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?

    一、是什么 loader 用于对模块的\\\"源代码\\\"进行转换,在 import 或\\\"加载\\\"模块时预处理文件 webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。如下图所示: 在webpack内部中,任何文件都是模块,不仅仅只是js文件 默认情况下,

    2024年02月14日
    浏览(39)
  • webpack基础知识五:说说Loader和Plugin的区别?编写Loader,Plugin的思路?

    一、区别 前面两节我们有提到Loader与Plugin对应的概念,先来回顾下 loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中 plugin 赋予了 webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目

    2024年02月14日
    浏览(46)
  • 信息检索(基础知识一)——词项-文档关联矩阵及倒排索引构建

      (本文中用到的文件名为:hyatt-k) 利用文件读取方法对给定邮件数据集中的文本文件进行预处理,并按照图1中的词项词典构造流程生成词项词典。  针对给定的邮件数据集和生成的词项词典,建立词项文档关联矩阵(如图1-1所示)  针对给定的邮件数据集和生成的词项词

    2024年02月08日
    浏览(49)
  • WebPack优化 Webpack构建速度优化

    目录 1 常用的loader和plugin 2 WebPack多入口配置: 3 如何抽离压缩css文件 4 webpack如何抽离公共代码和第三方代码  5 webpack如何实现异步加载JS (懒加载) 6  module chunk bundle 的区别 7  webpack优化构建速度 hard-source-webpack-plugin 8 webpack 优化产出代码 9 什么是Tree-Shaking 10 ES6 Module和 Commo

    2024年02月11日
    浏览(50)
  • webpack提升打包构建速度(hmr/热模块替换)

    一、 场景 开发时我们修改了其中一个模块代码,Webpack 默认会 将所有模块全部重新打包编译 ,速度很慢。 所以我们需要做到 修改某个模块代码 , 就只有这个模块代码需要重新打包编译 ,其他模块不变,这样打包速度就能很快 这个就需要在 webpack.config.js 中配置一下 hmr 热

    2024年02月09日
    浏览(45)
  • Webpack5入门到原理22:提升打包构建速度

    开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。 所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。 HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、

    2024年01月21日
    浏览(47)
  • webpack/vue-cli构建速度和打包体积优化

    webpack-bundle-analyzer 可以生成代码分析报告,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等 npm i -D webpackbar webpack-bundle-analyzer javascript 复制代码 const { BundleAnalyzerPlugin } = require(\\\'webpack-bundle-analyzer\\\'); ​ module.e

    2024年01月19日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包