解决webpack打包速度慢的解决办法汇总

Webpack打包慢的解决技巧

初次接触webpack时，如何有效解决打包速度慢的问题值得探讨。

技巧一

webpack在首次打包时需要进行较长的准备工作，例如加载各类插件。许多初学者习惯“执行一次webpack、测试、修改代码、再执行一次webpack”的循环模式，这往往导致效率低下甚至让人产生挫败感，认为webpack难以使用。实际上，这是一种错误的操作习惯。

正确的做法是直接运行webpack --watch命令。该命令会让webpack进入自动编译模式。虽然第一次打包速度较慢，但后续的自动编译速度会大幅提升，整体打包时间可缩短数倍。

技巧二

在使用webpack配合React、jQuery等公共库时，即使代码量很少，打包后的文件体积也可能达到几MB。我们能否避免将这些公共库打包进最终的应用文件中？

externals: 
    {
      'antd':true,
      'react': 'React',
      'react-dom': 'ReactDOM'
    }

在webpack配置文件的根节点下添加externals配置。这样当代码中require(“react”)时，webpack不会加载该模块，而是直接引用外部资源（注：此处存在争议，有观点认为冒号后应指定window.React属性名，以便无需require即可直接使用，但目前通常设置为true即可）。注意，此方式需要在HTML入口文件中手动引入对应的JS文件：

<script src="node_modules/react/dist/react-with-addons.js"></script>
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="node_modules/antd/dist/antd.min.js"></script>

在项目中正常调用require(“react”)，此时该库不会被打包进应用文件，最终文件体积可缩小至几KB，webpack的使用体验因此得到改善。

技巧三

通常情况下，技巧二已能解决大部分性能问题。但在某些场景（如使用MaterialUI）下，可能会遇到点击事件报错，提示重复引入了React等模块。若出现此类问题，建议采用技巧三。该方法将公共模块打包到另一个独立文件中，并配合CommonsChunkPlugin插件使用。在webpack --watch模式下，除首次打包外，后续编译不会重复生成该公共文件。

entry: {
    //这是我自己文件的入口，换成自己的
    main: './apps/main.jsx',
    //这个是把外面的东西打包成common.js
    'common':['./node_modules/react/dist/react-with-addons.min.js','./node_modules/react-dom/dist/react-dom.min.js']

  },
plugins: [
    //把common.js变为共有的，除第一遍打包后就不会再打包了
    new webpack.optimize.CommonsChunkPlugin('common', 'common.js')
  ]
output: {
    path: path.resolve(containerPath,'dist/'),
    filename: '[name].js'
  }

在webpack配置文件的根节点下添加相应配置，并在HTML入口文件中引入生成的common.js文件。

//确认一下是不是第一回打包后这个文件已经有了
<script src="dist/common.js"></script>

采用此方式后，webpack --watch首次打包依然较慢（因为需生成common文件），但后续修改代码时的默认打包将不再包含该公共文件。此外，其优势在于无需在HTML中单独引入React、jQuery等多个文件，只需引入common.js一个文件即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。