Webpack 性能优化

主要说明两点：

• 如何减少webpack打包的时间
• 如何让webpack打出来的包更小

对于loader和plugin的区别

1. loader 用于加载某些资源，比如对js，css文件进行一些响应的校验
2. plugin 用于扩展webpack的功能，直接作用于webpack.

---

如何减少webpack打包的时间

对于loader, 影响打包的就是babel, 引文babel会将字符串转换成AST，然后对AST进行转换最后在生成新的代码，项目越大，效率也就越低。

1. 优化搜索范围

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}

node_modules都是编译码，所以没必要再次编译

2. 增加缓存
   loader: 'babel-loader?cacheDirectory=true'
3. 受限于node是单线程的，所以可以引入插件 happyPack 开启多线程，这样可以很大程度提升打包效率

module: {
  loaders: [
    {
      test: /\.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // id 后面的内容对应下面
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]

4. 增加映射 resolve.alias：可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
5. module.noParse: 让webpack不扫描没有依赖的文件, 例如jq

module:{
        noParse:/jquery/,//不去解析jquery中的依赖库
}

如何让webpack打出来的包更小

对于SPA项目，项目存在十几个或更多的路由，如果都将打包到一个js文件，虽然请求合并了，但是页加载了很多不需要的代码。

1. 按需加载，加载对应的文件时候，返回一个Promise,当Promise成功以后去执行回调
   vue 路由懒加载
2. 该成多页面应用，单入口配置成多入口
3. Scope Hoisting 分析模块之间的依赖，尽可能的把打包的模块合并到一个函数中去

  optimization: {
    concatenateModules: true
  }
}

4. Tree Shaking 可以实现删除项目中未被引用的代码
   webapck 4 中生产环境中自动开启