借助 webpack 对项目进行分析优化

进入公司之后，接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档，但是由于项目过于庞大，老旧。包含了打包过慢，冗余文件过多等诸多问题。想要快速的解决这些问题，想要完全把功能重构一遍的话，成本太高了。一个一个文件来过，时间成本也比较大。因此在此篇文章中，我们介绍一下我是如何配合webpack一步步进行分析，将项目进行优化的。

同时我针对思路封装了一个webpack-unused-files，用于查找项目中的冗余文件，欢迎试用并star。

原文链接：http://callmedadaxin.github.io/2018/04/13/analyse-project-with-webpack/#more

问题

首先，我们先大致看下我们都有什么问题，然后一步步进行解决

• 项目频繁进行修改，冗余文件过多

• 部分第三方依赖滥用，想去除但是不知道在哪个文件中。或没用，但是遗留在package.json里

• 项目庞大，打包的结果过大，时间过长

删除冗余文件

由于项目的频繁改动，有很多文件已经不被使用并且没有被删除。由于项目的不断扩大，只会影响我们定位功能和问题的速度，因此对冗余文件进行清理，是很重要的。但是我们单凭肉眼很难识别哪个文件是否被依赖的，因此还要通过webpack来解决。

1.获取项目依赖的所有文件

我们来看一下webpack的输出文件格式：

{
  ...
  chunks: [{
    name: 'chunk-name',
    modules: [
      // 每个chunk中所有的依赖文件
    ]
  }]
  ...
}

所以说，根据这个stats.json，我们可以拿到在整个项目中拿到的所有项目文件：

/**
 * 查询依赖的模块
 */
function findSrcModules () {
  return new




    
 Promise((resolve, reject) => {
    fs.readFile(statPath, (err, data) => {
      if (err) return
      const json = JSON.parse(data)
      const assetsList = json.chunks
      let ret = []
      // 拿到所有chunk的所有依赖文件
      assetsList.forEach(chunk => {
        const modules = chunk.modules.map(item => item.name)
        ret 




    
= ret.concat(modules)
      })
      // 去除node_modules中的文件
      ret = ret.filter(item => item.indexOf('node_modules') < 0)
      resolve(ret)
    })
  })
}

通过这一步，我们可以拿到项目中，所有打包依赖的文件。

2.获取项目中所有的文件

通过glob,我们可以获取所有的文件：

function getAllFilesInSrc () {
  const pattern = './src/**'
  return new Promise((resolve, reject) => {
    glob




    
(pattern, {
      nodir: true
    }, (err, files) => {
      const ret = files.map(item => {
        return item.replace('./src', '.')
      })
      resolve(ret)
    })
  })
}

3.将两个文件数组进行对比，然后进行删除等操作

将两个数组进行对比，没有出现在依赖中的文件，就是冗余文件。我们可以一键删除。

findSrcModules().then(ret => {
  getAllFilesInSrc().then(allFiles => {
    const unUsed = allFiles.filter(item => {
      return ret.indexOf(item) < 0
    })
    const join = p => path.