webpack构建优化

Posted znlam

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack构建优化相关的知识,希望对你有一定的参考价值。

webpack性能优化:

  • 优化开发体验
  • 优化输出质量

优化开发体验:

  • 提升效率
  • 优化构建速度‘
  • 优化使用体验

优化输出质量:

  • 优化要发布到线上的代码,减少用户能感知到的加载时间
  • 提升代码性能,性能好,执行越快

缩小文件范围:

 优化loader配置:test、include、exclude三个配置项来缩小loader的处理范围,推荐include(webpack5.x此属性应该是去掉了,4.x推荐使用一下)

{
          test:/.css$/,
          include:path.resolve(__dirname,"./src"),//没指定这个字段,他会在整个项目中搜索检查css格式的文件再使用对应loader执行,比较消耗时间,此属性指定搜索范围,只在此目录下搜索 
          //exclude:path.resolve(__dirname,"./node_modules"),//排除,不要搜索那个目录
          use:["style-loader","css-loader"],
},

 优化resolve.modules配置:他用于配置webpack去哪些目录下寻找第三方模块,默认是node_modules;寻找第三方模块,默认是当前目录下的node_modules里面找, 没有的话就去上一级目录../node_modules找,再没有会去../../node_modules里找

module.exports = {
  resolve:{
        modules:[path.resolve(__dirname,"./node_modules")]//如果我们的第三方模块都安装在项目根目录下,就可以直接指明这个路径
    }  
}

 

以上是关于webpack构建优化的主要内容,如果未能解决你的问题,请参考以下文章

webpack构建优化

Webpack构建项目进一步优化

图解Webpack——优化篇

webpack 构建优化思路

webpack构建优化—dll

深度优化 Webpack 性能,翻倍构建性能