webpack構建中tree shaking、scope Hoisting(面試題)

2021-03-02 情非得已小猿猿
一、tree shaking （搖樹優化）

tree shaking概念：

tree shaking原理：依賴於ES6 moudel特性

只能作為模塊頂層的語句出現

import的模塊名只能是字符串常量

import binding 是immutablede

`tree shaking副作用`

雖然生產模式下默認開啟，但是由於經過 babel 編譯全部模塊被封裝成 IIFE（立即執行函數）

IIFE 存在副作用無法被 tree-shaking 掉

需要配置 { module: false }和 sideEffects: false

rollup 和 webpack 的 shaking 程度不同，以一個 Class 為例子

1、擦除無用的js2、擦除無用的css

webpack.prod.js文件

  const PATH = {
    src: path.join(__dirname, './src')
  }

    new PurgecssPlugin({
      paths: glob.sync(`${PATH.src}/**/*`, {nodir: true})
    }),

二、scope Hoisting （作用域提升）

production mode默認開啟 scope Hoisting
new webpack.optimize.ModuleConcatenationPlugin()插件

構建後的代碼存在大量閉包代碼

導致打包bundle體積變大，內存開銷變大

原理：

將所有的模塊的代碼按照引用順序放在一個函數作用域裡，然後適當的重命名一些變量以防止變量名衝突

可以減少函數聲明代碼和內存開銷

相關焦點

  • 【Webpack】654- 了不起的 Webpack Scope Hoisting 學習指南
    在 JavaScript 中，還有「變量提升」和「函數提升」，JavaScript 會將變量和函數的聲明提升到當前作用域頂部，而「作用域提升」也類似，webpack 將引入到 JS 文件「提升到」它的引入者的頂部。
  • 2020 年前端面試複習必讀文章【超三百篇】
    : https://juejin.im/post/5ac9dc9af265da23884d5543[144]手把手教你擼一個 Webpack Loader: https://juejin.im/post/5a698a316fb9a01c9f5b9ca0[145]webpack 如何通過作用域分析消除無用代碼: https://diverse.space/2018/05/better-tree-shaking-with-scope-analysis
  • Webpack vs Rollup
    它的出現，解決了當時的構建工具不能處理的問題——構建複雜的單頁面應用(SPA)。它是一個強力的模塊打包器。 所謂包(bundle)就是一個 JavaScript 文件，它把一堆資源(assets)合併在一起，以便它們可以在同一個文件請求中發回給客戶端。 包中可以包含 JavaScript、CSS 樣式、HTML 以及很多其它類型的文件。
  • 重學webpack4之基礎篇
    plugins: [ new HtmlWpeckPlugin({})]webpack-dev-serverwebpack-dev-server,開啟本地伺服器，監聽文件變化後，熱更新頁面不刷新瀏覽器而是熱更新，不輸出文件，而是放在內存中配合 new.webpack.HotModuleReplacementPlugin
  • 【webpack】webpack 中最易混淆的 5 個知識點
    今天我主要分享的是一些 webpack 中的易混淆知識點，也是面試的常見內容。我把這些分散在文檔和教程裡的內容總結起來，目前看是全網獨一份，大家可以加個收藏，方便以後檢索和學習。進行打包時，webpack 會根據文件引用關係生成 chunk 文件，webpack 會對這個 chunk 文件進行一些操作；webpack 處理好 chunk 文件後，最後會輸出 bundle 文件，這個 bundle 文件包含了經過加載和編譯的最終源文件，所以它可以直接在瀏覽器中運行。
  • 前端面試題及答案整理
    ，乾脆將發現的各類面試題整理一下共享出來，大部分面試題是沒有標準答案的，我給出的答案也是僅供參考，如果有更好的解答歡迎在評論區留言。Part1 手寫代碼現場手寫代碼是現在面試中很常見的一類面試題，考察基礎的數據結構與算法能力。
  • Webpack 優化技巧,構建效率提升 50%
    以下是我將構建的大小減半的具體方法。是什麼讓構建包變得這麼大？首先我需要了解構建包為什麼會變得這麼大。為此我安裝了 webpack-bundle-analyzer。它能提供包中所有項目大小的可視指南。npm install --save-dev webpack-bundle-analyzer接下來我對 webpack 做了些配置，然後就能在 vue.config.js 文件中使用它了。
  • 2020年底面試題
    建議每一次面試後記下面試題每次面試完記得總結，把每一個知識點都學習會，防止後面再面又不會。我以下記錄的都不全，其實有重複的題。但有的沒弄明白，後面又會答不好。當時一個星期沒有通知面試，滴滴的投的約的比較早，一面確實面的不太好，可能之前滴滴掛的面試記錄，對面試也有影響吧。滴滴聊了一會，做了一套面試題，用騰訊文檔出的，基本是粘貼的題的圖，所以下面也直接粘過來了。一面用 JS 實現二分查找（折半查找）算法，並寫出時間複雜度。用 JS 實現深拷貝。4. 如下代碼，分別彈出什麼信息？
  • webpack基本配置有哪些?如何搭建webpack?
    主要內容webpack學習目標第一節 webpack介紹1.webpack介紹webpack 是一個模塊打包器。webpack 的主要目標是將 JavaScript 文件打包在一起,打包後的文件用於在瀏覽器中使用,但它也能夠勝任轉換(transform)、打包(bundle)。
  • webpack教程:如何從頭開始設置 webpack 5
    基本配置在項目的根目錄中創建一個webpack.config.js。Entryentry是配置模塊的入口，可抽象成輸入，Webpack 執行構建的第一步將從入口開始搜尋及遞歸解析出所有入口依賴的模塊。/dist'),    filename: '[name].bundle.js',  },}現在，我們具有構建捆綁包所需的最低配置。在package.json中，我們可以創建一個運行webpack命令的構建腳本。
  • 圖解Webpack——實現Plugin
    面試工作加分項!Plugin是webpack生態系統的重要組成部分，其目的是解決loader無法實現的其他事，可用於執行範圍更廣的任務，為webpack帶來很大的靈活性。目前存在的plugin並不能完全滿足所有的開發需求，所以定製化符合自己需求的plugin成為學習webpack的必經之路。下面將逐步闡述plugin開發中幾個關鍵技術點並實現plugin。
  • webpack簡單介紹
    要運行的JS文件，main.js:項目入口文件，build.js：項目打包後的構建文件6) 利用命令行工具輸入npm run dev將項目跑一邊（打包）webpack配置文件的設置1) 使用命令行工具初始化項目（
  • 2020最新Web前端經典面試題試題及答案(持續更新)-開課吧
    Web前端面試題Web前端面試題：說說你對webpack的看法解析：webpack是一個模塊打包工具，可以使用webpack能很好的管理、打包web開發中所用到的HTML、js、css以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對於不同類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源。
  • Webpack的使用指南-Webpack的常用解決方案
    1.自動構建HTML，可壓縮空格，可給引用的js加版本號或隨機數：html-webpack-plugin解決方案：使用插件 html-webpack-pluginwebpack.config.js如下：module.exports = {entry: '.
  • Webpack打包全世界
    核心和概念本質上，webpack 是一個現代 JavaScript 應用程式的靜態模塊打包器(module bundler)。當 webpack 處理應用程式時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。
  • 看完 Webpack 源碼,我學到了這些
    不過，在實際操作中，直接使用下載源碼中的 webpack.js 調試可能會出現報錯 Cannot find module 'json-parse-better-errors' 或 Cannot find module 'webpack/lib/RequestShortener'，只需運行 npm install webpack webpack-cli --save-dev，即可解決報錯，且不影響調試源碼
  • Webpack 多入口配置,看這篇,足夠了
    如果報沒有找到 tree 命令的錯，安裝 tree 命令行 brew install tree 即可。windows 系統在目標目錄下使用 tree/f1.txt 即可把當前目錄樹生成到一個新文件 1.txt 中。
  • 如何編寫一個 Webpack Plugin
    使用階段式的構建回調，開發者可以引入它們自己的行為到 webpack 構建流程中。❞編寫 Pluginwebpack 插件的組成：一個 JS 命名函數或一個類（可以想下我們平時使用插件就是 new XXXPlugin()的方式）在插件類/函數的 (prototype) 上定義一個 apply 方法。