前端优化之旅（一）：HTTP请求与Webpack

前端优化之旅（一）

本章是前端优化之旅的第一章，我会从网络层来分析我们能干点什么？
对于网络层前端能做的优化主要就是

减少请求次数
减少单次请求的时间减少阻塞

而这就指向了我们最常见的两种操作，对于资源的压缩与合并，我相信大家对这两个字眼应该不算陌生。不论是使用gulp还是webpack甚至于手动去压缩文件，我们的目的都是为了使得文件变得更少，更小。目前前端领域使用最多同时最广的应该就是Webpack了，我们一起来看看webpack能为我们做些什么吧？

减少loader的任务量（以babel-loader为例）

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader?cacheDirectory=true',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

这里忽视了node_modules以及bower_components的处理，同时开启了文件的缓存，这样能够大大提升babel-loader的效率

缓存第三方类库

在我们实际开发中，一旦项目定型后续的开发或者迭代，对于第三方类库的引用其实是趋于稳定的几乎不会有很大的变动，但是在我们每次打包上线的时候，常常会重复的去对这些第三方类库进行打包，本来这些类库由于嵌套或者引用就很庞大，使得我们需要花很多时间去做这样一个重复的事，这里推荐使用DllPlugin插件来处理这些第三方类库，他的思想就是把这些第三方类库集中在一起，只有在你自身依赖发生改变的时候才会重新打包，这样就大大的提升了我们再打包时候效率,这里推荐大家一篇文章详细的讲解的DllPlugin的使用

利用多核进行打包

这里推荐的插件就是Happypack，他是利用CPU的多核优势，把任务分配给多个子进程去执行，提升打包的效率

const HappyPack = require('happypack')
const ThreadPool =  HappyPack.ThreadPool({ size: os.cpus().length })
module.exports = {
  module: {
    rules: [
      ...
      {
        test: /\.js$/,
        loader: 'happypack/loader?id=happyBabel',
        ...
      },
    ],
  },
  plugins: [
    ...
    new HappyPack({
      id: 'happyBabel',
      threadPool: ThreadPool,
      loaders: ['babel-loader?cacheDirectory']
    })
  ],
}

忽视未使用的模块

在我们开发过程中其实很多时候会在模块中写一些无用的模块引入，这部分内容不会生效，但是如果也打包进文件，其实也是扩大了文件的体积，这里可以用时Tree_Shaking插件，可以再编译的时候记录没有使用的模块，从而在打包的时候去除这些模块的引入