webpack构建性能提升的一些常用措施

前言

前端工程化已经在各个公司生根发芽，webpack作为前端工程化重要的构建工具，
它具备高效的打包速度， 完整的依赖分析，语义化分析，包结构分析等，在生产线发挥着不可替代的作用。
然而随着项目的越来越庞大， 第三方类库的引用， 很多业务逻辑的抽象， 都导致构建速度越来越慢。
甚至在一些构建复杂的流程中，时间消耗占比影响着快速迭代的效率，因此针对webpack的构建优化，
在任何公司、任何业务线都很有价值，本文对自己探索webpack的一些经验，做个总结，希望对你有所帮助。

核心优化

一、构建工具升级

webpack4已经趋于完善， 相对于webpack3, 构建速度有了质的飞跃。
webpack4 发布时，官方也曾表示，其编译速度提升了 60% ~ 98%。
内部的构建算法等都已经做了优化提升，具体可以自行查看webpack4的源码学习。
所以如果你的项目还是在使用webpack3果断升级吧~~~

二、升级常见包的更新

版本升级最大的一个问题是，就是一个关联包的兼容问题， 以下汇总了一些常见包升级遇到问题：

• 1、更新webpack4的命令(4.x版本需要cli工具搭配)：

    npm install --save-dev webpack@latest
    npm install --save-dev webpack-cli             
  

• 2、CommonsChunkPlugin废弃

相关报错:

		webpack4 Error: webpack.optimize.CommonsChunkPlugin has been removed, 
		please use config.optimization.splitChunks instead

升级办法:

    module.exports = {
       plugins: [
   -     new webpack.optimize.CommonsChunkPlugin({
   -       name: 'common' // 指定公共 bundle 的名称。
   -     })
       ],
       
        变成：
        
   +   optimization: {
   +     splitChunks: {
   +       name: 'common'
   +     }
   +   },

• 3、extract-webpack-plugin弃用

相关报错：

	Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

<