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(庫)，是樹上活的樹葉。灰色表示未引用代碼，是秋天樹上枯萎的樹葉。爲了除去死去的樹葉，你必須搖動這棵樹，使它們落下。