webpack优化构建速度示例-合理配置loader的include exclude:

webpack优化构建速度示例-合理配置loader的include exclude:

码农世界 2024-05-16 前端 76 次浏览 0个评论

实际上,babel-loader 在 Webpack 配置中默认并不包含 exclude 和 include 选项的默认值,通常,为了优化构建性能,开发者会显式地设置 exclude 和 include 选项,以便 babel-loader 只处理必要的文件。

src/index.js
import $ from 'jquery'
$(document).ready(() => {
    $('body').css({
        width: '100%',
        height: '100%',
        'background-color': 'red'
    })
})

优化前

webpack.config.js
const config = {
    entry: './src/index.js',
    output: {
        filename: 'main.js'
    },
  mode: 'development',
  module: {
    rules: [  
      {  
        test: /\.js$/, // 使用正则匹配以.js结尾的文件  
        use: {  
          loader: 'babel-loader', // 使用babel-loader  
          options: {  
            // ... Babel的配置选项 ...  
          },  
        },  
      },  
    ], 
  }
}
module.exports = config;

优化后

webpack.config.js
const config = {
    entry: './src/index.js',
    output: {
        filename: 'main.js'
    },
  mode: 'development',
  module: {
    rules: [  
      {  
        test: /\.js$/, // 使用正则匹配以.js结尾的文件  
        exclude: /node_modules/, // 排除node_modules目录中的文件  
        include: /src/, // 只包括src目录中的文件  
        use: {  
          loader: 'babel-loader', // 使用babel-loader  
          options: {  
            // ... Babel的配置选项 ...  
          },  
        },  
      },  
    ], 
  }
}
module.exports = config;

可以看到配置后节省了1184-814=340ms

转载请注明来自码农世界,本文标题:《webpack优化构建速度示例-合理配置loader的include exclude:》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,76人围观)参与讨论

还没有评论,来说两句吧...

Top