开发环境webpack.config.js性能优化配置

1.优化打包构建速度

现象：每次修改一个模块中的内容的时候，都会将其他模块一同再次打包处理。如果一个项目中的模块很多时，每次修改都去打包所有的模块，这必然会影响打包构建速度。

解决：

HMR：hot module replacement热模块替换/模块热替换，基于devServer

作用：一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块，极大提升构建速度

开启HMR：

devServer: {
  contentBase: resolve(__dirname,'build'),
  compress: true,
  port: 3000,
  // 开启HMR功能
  hot: true
},

但是仅仅开启HMR，对于其他文件不一定适用。

• 样式文件：可以使用HMR功能，因为：style-loader内部实现了

• js文件：默认不能使用HMR功能

  解决：需要修改js代码，添加支持HMR功能的代码

  if (module.hot) {
    // 一旦module.hot为true，说明开启了HMR功能，则让HMR功能代码生效
    module.hot.accept('./print.js',function () {
      // 该方法会监听print.js文件的变化，一旦发生变化，其他默认不会重新打包构建
      // 会执行后面的回调函数
      print();
    })
  }
  

  注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。原因：入口文件引入了很多其他文件，一旦修改避免不了会重新加载其他文件，所以无法HMR

• html文件：默认不能使用HMR功能，当修改了html文件，会导致一个问题：html文件不能热更新了。

  解决html文件不能热更新：修改entry入口，将html文件引入

  entry: ['./src/index.js','./src/index.html'],
  

  能够热更新仍然不能使用HMR，但是由于一个项目中只会存在一个html文件，而热更新模块出现的原因主要是模块很多，导致修改一个导致全部都要引入的问题，因此HTML文件不需要用HMR功能

2.优化代码调试

source-map：一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误）

用法：在webpack.config.js中加上：

'devtool': '选项';

• 选项主要为：

  [inline-|hidden-|eval-] [nosources-] [cheap-[module-]]source-map

  以上可以任意组合，但是需要注意顺序

• 单组合之间的区别

  首先先区分内联和外部的区别：

  • 外部生成了xx.js.map文件（该文件作为源代码到构建之后的代码的映射关系），内联没有
  • 内联构建速度更快

  单组合之间的认识：

  • source-map

    外部

    显示错误代码准确信息和源代码的错误位置

    index.js:10

  • inline-soure-map

    内联 只生成一个内联source-map(位于构建代码最后添加)

    显示错误代码准确信息和源代码的错误位置

  • hidden-source-map

    外部

    会产生错误代码错误原因，但是没有错误位置

    且不能追踪到源代码错误，只能提示到构建后代码的错误位置

  • eval-source-map

    内联 每个文件的eval中都生成对应的source-map

    显示错误代码准确信息和源代码的错误位置

  • nosources-source-map

    外部

    有错误代码准确信息，但是没有任何源代码信息，甚至于构建后代码也没有

  • cheap-source-map

    外部

    错误代码准确信息和构建后代码的错误信息

    只能精确到行

  • cheap-module-source-map

    外部

    错误代码准确信息和构建后代码的错误信息位置，但是 没有构建之后代码信息

    module会将loader的source map加入

• 如何选择source-map

  • 开发环境：速度快，调试友好

    速度快(eval>inline>cheap>…)

    eval-cheap-source-map > eval-source-map

    调试更友好

    source-map > cheap-module-souce-map > cheap-source-map

    结论：eval-source-map / eval-cheap-module-souce-map

    一般前端框架：react、vue脚手架里面一般使用的是eval-source-map

  • 生产环境：源代码隐藏，调试友好，内联会让代码体积变大，所以在生产环境不用内联

    nosources-source-map > hidden-source-map

    结论： source-map / cheap-module-source-map