原创 webpack二刷之五、生產環境優化（5.提取壓縮CSS）
MiniCssExtractPlugin 提取 CSS 到單個文件 目前示例中webpack使用css方式： css-loader：將js中的css內容解析 style-loader：最終將css樣式通過<style>標籤方式注
2020-07-07 17:53:18
4
原创 webpack二刷之五、生產環境優化（3.sideEffects 副作用）
sideEffects 副作用 webpack4新增的功能。 允許通過配置的方式去標識代碼是否有副作用，從而爲 Tree Shaking 提供更多的壓縮空間。 sideEffects 一般用於開發npm模塊時，標記是否有副作用。
2020-07-07 17:53:18
4
原创 webpack二刷之五、生產環境優化（1.環境配置 & 全局變量）
生產環境優化 開發環境注重開發效率，生產環境注重運行效率。 開發環境所使用的soucre map和HMR等webpack特性會 生成 或 向打包文件中添加 一些生產環境用不到的內容。 針對這個問題，webpack4推出了 模式(m
2020-07-07 17:53:18
1
原创 webpack二刷之五、生產環境優化（6.輸出文件名Hash substitutions）
輸出文件名Hash substitutions 一般部署前端的資源文件時，都會啓用服務器的靜態資源緩存。 這樣用戶的客戶端就可以緩存應用的靜態資源，後續就不再需要重複請求服務器獲取靜態資源文件。 從而整體提上了應用的響應速度。 不
2020-07-07 17:53:18
1
原创 webpack二刷之五、生產環境優化（2.Optimization & Tree Shaking）
Optimization webpack 內部優化配置 webpack配置文件中的 optimization 屬性，用於集中去配置webapck內部的一些優化功能。 Tree Shaking 搖樹 字面意思就是伴隨着搖樹的動作，
2020-07-07 17:53:18
1
原创 webpack二刷之五、生產環境優化（4.Code Splitting 代碼分包 / 代碼分割）
Code Splitting 代碼分包 / 代碼分割 webpack默認打包依然存在一些弊端。 就是所有代碼最終都會被打包到一起（一個bundle文件中）。 如果項目中代碼比較複雜，模塊比較多，打包結果就會很大（bundle體積過
2020-07-07 17:53:18
4
原创 ES6學習之繼承和原型鏈
每個函數和實例對象都有一個屬性指向自己的原型對象。 函數指向原型對象的屬性是prototype。 實例對象指向原型對象的屬性是 __proto__。 實例對象的 __proto__指向它的構造函數的原型對象prototype。 構
2020-06-23 10:52:14
原创 ES6學習之更優的異步編程方案 Promise
Promise譯爲“承諾”。 用於向執行者（Promise實例）交待一件任務，當任務結束，應如何處理。 使用 new Promise(function(resolve,reject){}) 創建promise實例需傳入一個函數，
2020-06-23 10:52:14
原创 ES6學習之this
正常函數聲明中this指向調用函數的對象 var name = '喬峯'; function show() { console.log(this.name); } show(); // 此處調用函數的對象是全局(window)，
2020-06-23 10:52:14
原创 ES6學習之對象、類&原型
對象Object 設置對象屬性 let obj = { a: 1 }; obj.b = 2; Object.defineProperty(obj, 'c', { value: 3, // ... 其他描述 }); Objec
2020-06-23 10:52:13
原创 前端基礎學習之JS執行機制-內存模型(堆內存、棧內存、隊列、執行棧)、事件循環
概念 數據結構 堆(Heap)、棧(Stack)、隊列(Queue)是存儲數據的數據結構或存儲機制。 它們對數據的操作順序 堆：進出隨意。 棧：先進後出/後出先進的壓入式存儲。 隊列：先進先出。 後進先出 LIFO 譯爲 Last
2020-06-23 10:52:13
原创 ES6學習之async/await
async 函數返回一個 Promise 對象，可以使用 then 方法添加回調函數。 async 函數中可能會有 await 表達式，async 函數執行時，如果遇到 await 就會先暫停執行 ，等到觸發的異步操作完成後，恢
2020-06-23 10:52:13
原创 ES6學習之Map WeakMap
帶鍵(key)的集合 Map、WeakMap(映射) 和 Set(集合) 對象承載的數據元素可以按照插入時的順序被迭代遍歷。 Map 與Object的比較 Map的key值可以是任意類型(可以將原始值(字面量)存儲爲鍵)，Obje
2020-06-23 10:52:13
原创 webpack二刷之二、loader資源模塊加載器
loader資源模塊加載器 webpack 資源模塊加載 webpack內部(內部loader)默認只會處理javascript文件，也就是說它會把打包過程中所有遇到的文件當作javascript文件去解析。 可以爲其他類型的文件
2020-06-23 10:52:12
原创 webpack二刷之四、開發體驗
webpack 開發體驗 webpack 增強開發體驗 原始開發方式： 編寫源代碼 webpack打包 運行應用 刷新瀏覽器 設想理想的開發環境： 以HTTP Server運行 不是以文件形式預覽 接近生產環境的狀態 類似
2020-06-23 10:52:12