demo10 關於JS Tree Shaking

時間 2019-12-05

標籤 demo10 demo 關於 tree shaking 欄目 JavaScript 简体版

原文原文鏈接

1.什麼是 tree shaking

藉助於 es6 (es2015) 模塊系統 (import 和 export) 的靜態解析，webpack 可以利用 Tree Shaking 進行按需加載，移除掉沒有被引用的模塊，從而減小包的大小，縮小應用的加載時間，從而提升性能體驗。javascript

2.需配合 `UglifyJSPlugin` 來實現 tree shaking

UglifyJSPlugin 的做用在於刪除未被引用代碼以及壓縮代碼。java

從 webpack 4 開始，只需將 "mode" 設置爲 "production" 模式，便可開啓 UglifyJSPlugin 的功能。webpack

詳情可參考官方 Tree Shaking 文檔：www.webpackjs.com/guides/tree…git

3.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo10
    --src
      -app.js
      -module.js
    -webpack.config.js
複製代碼

module.jses6

export const sayHello1 = () => {
  console.log('hello1');
}

export const sayHello2 = () => {
  console.log('hello2');
}

export const sayHello3 = () => {
  console.log('hello3');
}
複製代碼

app.jsgithub

// 只導入了 sayHello1 ,觀察打包後的 bundle 代碼，移除了 sayHello2 和 sayHello3 的代碼
import { sayHello1 } from './module';

sayHello1();
複製代碼

4.編寫webpack配置文件

webpack.config.jsweb

const path = require("path");

module.exports = {
  mode: "production" || "development", // tree shaking 須要使用 "production" 模式
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "[name].bundle.js"
  }
};
複製代碼