一、开发环境性能优化

1.优化打包构建速度

HMR：hot module replacement 热模块替换 / 模块热替换

  • 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度
  • 样式文件（css）：可以使用 HMR 功能，因为 style-loader 内部实现了~

  • js 文件：默认不能使用 HMR 功能 —> 需要修改 js 代码，添加支持 HMR 功能的代码

    • 注意：HMR 功能对 js 的处理，只能处理非入口 js 文件的其他文件，因为入口文件一更新，会重新引入其他文件。
      1. if (module.hot) {
      2. // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
      3. module.hot.accept('./print.js', function() {
      4. // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
      5. // 会执行后面的回调函数
      6. print();
      7. });
      8. }

  • html 文件：默认不能使用 HMR 功能，同时 html 文件不能热更新了~（不需要HMR，原因同上）

    • 解决无法热更新：修改 entry 入口，将 html 文件引入
    • entry: ['./src/js/index.js', './src/index.html'],
  • 开启 HMR 功能 
    1. devServer: { 
    2. contentBase: resolve(__dirname, 'build'), 
    3. compress: true, 
    4. port: 3000, 
    5. open: true, 
    6. // 开启 HMR 功能 
    7. // 当修改了 webpack 配置，新配置要想生效，必须重新 webpack 服务
    8. hot: true }
    2.

    二、生产环境性能优化