提升Webpack的构建速度的方式有哪些？

在使用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可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码

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

module.exports = { 

    ... 

    extensions:[".warm",".mjs",".js",".json"] 

} 

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

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

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

module.exports = { 

  resolve: { 

    // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤 

    // 其中 __dirname 表示当前工作目录，也就是项目根目录 

    modules: [path.resolve(__dirname, 'node_modules')] 

  }, 

}; 

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

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

module.exports = { 

    ... 

    resolve:{ 

        alias:{ 

            "@":path.resolve(__dirname,'./src') 

        } 

    } 

（编辑：好传媒网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!