为什么webpack 打包速度慢

这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

为什么webpack 打包速度慢

webpack在首次打包的时候，需要做长时间的准备工作，比如加载插件等；

解决webapck打包速度慢的方法：

• 命令行执行：webpack --watch

  这样会使webpack自动编译，在第一次打包的时候会慢，但是后面的编译速度会快很多。这里的原理在下面webpack如何开启watch模式会讲到。

• 配置 externals 来将依赖的第三方库指向全局变量，从而不再打包这个库

  项目依赖的第三方库moudules很多，导致只改动一点代码就要打包很多东西，每次打包时速度会很慢。但是我们不需要重新打包这些第三方库，只需要重新打包我们的业务代码。

  module.exports = {
      ...
      externals: {
          'react': 'window.React'
      }
      ...
  }
  

  我们这样配置等于让 Webpack 知道，对于 react 这个模块，就不要打包了，直接指向 window.React 就好。不过别忘了加载 react.min.js，让全局中有 React 这个变量。

  另一种写法：

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

  上面的配置是告诉webpack在require(“react”)的时候不要去加载模块，一般写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”)时就不会打包react了。

  但是这样仍然有缺陷，由于第三方库可以依赖别的库,当新加别的库会导致webpack重新打包第三方库，详细的可以看这位老哥的文章：blog.csdn.net/fengyinchao…

• 将共有的模块打进另外一个文件中，然后使用CommonsChunkPlugin插件，在webpack –watch不是第一遍打包的时候就不会重复的打另外一个文件了。

  详情参见;www.bianchengquan.com/article/671…

webpack如何开启watch模式

方式一：命令行执行 webpack --watch

执行webapck --watch 命令代表执行一次编译一次。

执行webapck --watch 命令代表执行一次编译多次，只要修改相关文件就会重新触发编译，方便反复调式。

方式二：修改配置文件webpack.config.js

在配置文件webpack.config.js中，输入代码watch:true

module.exports = {
    entry: {
        //...
    },
    output: {
        //...
    },
    watch: true,  
    watchOptions: {  
        ignored: /html/  
    },
}

指定watch为true以后，打包时就会自动开启watch模式，watchOptions是配置选项，ignored表示忽略某个目录的更新。

参考：

blog.csdn.net/fengyinchao…

www.bianchengquan.com/article/671…