webpack(6)-模块热替代&tree shaking

模块热替换(hot module replacement 或 HMR)

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新

HMR 不适用于生产环境，这意味着它应当用于开发环境。

如何启用：（1）更新webpack-dev-server （2）使用webpack内置的HMR插件（HotModuleRelacementPlugin）

//package.json 
 devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '热模块更新'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]

tree shaking

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export

我们已经知道，想要使用 tree shaking 必须注意以下……

• 使用 ES2015 模块语法（即 import 和 export）。
• 确保没有 compiler 将 ES2015 模块语法转换为 CommonJS 模块（这也是流行的 Babel preset 中 @babel/preset-env 的默认行为 - 更多详细信息请查看 文档）。
• 在项目 package.json 文件中，添加一个 "sideEffects" 属性。
• 通过将 mode 选项设置为 production，启用 minification(代码压缩) 和 tree shaking。

你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。灰色表示未引用代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。