webpack提高构建速度

前端程序猿dzf

于 2020-09-25 17:17:16 发布

阅读量494

点赞数 1

分类专栏： webpack 教程

本文链接：https://blog.youkuaiyun.com/qq398577351/article/details/108799665

版权

本文介绍了多种提高webpack构建速度的方法，包括费时分析、指定文件扩展名、使用别名、配置modules、resolveLoader和IgnorePlugin来忽略特定模块、集成friendly-errors-webpack-plugin以优化错误提示、利用缓存如babel-loader缓存、cache-loader、hard-source-webpack-plugin，以及使用oneof避免遍历所有规则。此外，还探讨了多进程处理如thread-loader和DLL plugin打包技术，将基础模块打包成动态链接库以加速构建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、费时分析
// webpack.dev.conf

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap(merge(baseWebpackConfig, {
   
    module: {
   
      rules: utils.styleLoaders({
    sourceMap: config.dev.cssSourceMap, usePostCSS: true })
    },
}

2、缩小范围
指定extension之后可以不用在require或是import的时候加文件拓展名，会依次阐释添加拓展名进行匹配

  resolve: {
   
    extensions: [".js", ".jsx", ".json", ".css"],
    alias: {
   
      bootstrap: bootstrap,
    },
    modules: [path.resolve(__dirname, "node_modules")],
  },

3.别名
alias 别名可以加快查找模块的速度

  resolve: {
   
    alias: {
   
      bootstrap: bootstrap,
    },
  },

4.modules
在这里插入图片描述

5.resolveLoader

resolve.resolveLoader用于配置解析loader时的resolve配置默认的配置
  resolveLoader: {
   
    modules: [path.resolve(__dirname, '../node_modules')],
    extensions: [".js", ".json"],
    mainFields: ["loader", "main"],
  },

IgnorePlugin
忽略某些特定的模块，webpack不把这些指定的模块打包进去

plugins: [ 
    new webpack.IgnorePlugin(/^\.\/locale/, /moment$/),
  ],

第一个参数是匹

最低0.47元/天解锁文章