webpack优化-速度优化-文件搜索范围

减小文件搜索范围

在使用实际项目开发中，为了提升开发效率，很明显你会使用很多成熟第三方库；即便自己写的代码，模块间相互引用，为了方便也会使用相对路劲，或者别名(alias)；这中间如果能使得 Webpack 更快寻找到目标，将对打包速度产生很是积极的影响。于此，我们需要做的即：减小文件搜索范围，从而提升速度；实现这一点，可以有如下两法：

配置 resolve.modules

Webpack的resolve.modules配置模块库（即 node_modules）所在的位置，在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个 node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径；同样，对于别名(alias)的配置，亦当如此：

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@components': path.resolve(__dirname, '../', 'src', 'components')
    }
  },
  ...
}

需要额外补充一点的是，这是 Webpack2.* 以上的写法。在 1.* 版本中，使用的是 resolve.root，如今已经被弃用为 resolve.modules；同时被弃用的还有resolve.fallback、resolve.modulesDirectories。

设置 test & include & exclude

Webpack 的装载机(loaders)，允许每个子项都可以有以下属性：

test：必须满足的条件（正则表达式，不要加引号，匹配要处理的文件）
exclude：不能满足的条件（排除不处理的目录）
include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
loader：一串“！”分隔的装载机（2.0版本以上，"-loader"不可以省略）
loaders：作为字符串的装载器阵列

对于include，更精确指定要处理的目录，这可以减少不必要的遍历，从而减少性能损失。同样，对于已经明确知道的，不需要处理的目录，则应该予以排除，从而进一步提升性能。假设你有一个第三方组件的引用，它肯定位于node_modules，通常它将有一个 src 和一个 dist 目录。如果配置 Webpack 来排除 node_modules，那么它将从 dist 已经编译的目录中获取文件。否则会再次编译它们。故而，合理的设置 include & exclude，将会极大地提升 Webpack 打包优化速度，比如像这样：

module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

 

作者：晚晴幽草
链接：https://www.jianshu.com/p/3b9a19e5cead
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。