webpack3和webpack4的區別
-
1.1. mode/–mode參數,新增了mode/–mode參數來表示是開發還是生產(development/production),production 側重於打包後的文件大小,development側重於goujiansud
-
1.2. 移除loaders,必須使用rules(在3版本的時候loaders和rules 是共存的但是到4的時候只允許使用rules)
-
1.3. 移除了CommonsChunkPlugin (提取公共代碼),用optimization.splitChunks和optimization.runtimeChunk來代替
-
1.4. 支持es6的方式導入JSON文件,並且可以過濾無用的代碼
let jsonData = require('./data.json')
import jsonData from './data.json'
import { first } from './data.json'
// 打包時只會把first相關的打進去
- 1.5. 升級happypack插件(happypack可以進行多線程加速打包)
- 1.6. ExtractTextWebpackPlugin調整,建議選用新的CSS文件提取kiii插件mini-css-extract-plugin,production模式,增加minimizer
loader 和 plugin 不同
- 2.1. loader是使wenbpack擁有加載和解析非js文件的能力
- 2.2. plugin 可以擴展webpack的功能,使得webpack更加靈活。可以在構建的過程中通過webpack的api改變輸出的結果
webpack構建流程
- 3.1. 初始化參數,從配置文件和shell語句中讀到的參數合併,得到最後的參數
- 3.2. 開始編譯:用合併得到的參數初始化complier對象,加載是所有配置的插件,執行run方法開始編譯
- 3.3. 確定入口,通過entry找到入口文件
- 3.4. 編譯模塊,從入口文件出發,調用所有配置的loader對模塊進行解析翻譯,在找到該模塊依賴的模塊進行處理
- 3.5. 完成模塊編譯,得到每個模塊被翻譯之後的最終的內容和依賴關係
- 3.6. 輸出資源,根據入口和模塊之間的依賴關係,組裝成一個個包含多個模塊的chunk,在把每個chunk轉換成一個單獨的文件加載到輸出列表
- 3.7. 輸出完成,確定輸出的路徑和文件名,把內容寫到文件系統中
在以上過程中,webpack會在特定的時間點廣播出特定的事件,插件在艦艇感興趣的事件後會執行特定的邏輯,改變webpack的運行結果
webpack 熱加載執行原理
????
如何利用webpack來優化前端性能
- 5.1. 壓縮代碼。uglifyJsPlugin 壓縮js代碼, mini-css-extract-plugin 壓縮css代碼
- 5.2. 利用CDN加速,將引用的靜態資源修改爲CDN上對應的路徑,可以利用webpack對於output參數和loader的publicpath參數來修改資源路徑
- 5.3. 刪除死代碼(tree shaking),css需要使用Purify-CSS
- 5.4. 提取公共代碼。webpack4移除了CommonsChunkPlugin (提取公共代碼),用optimization.splitChunks和optimization.runtimeChunk來代替
什麼是bundle,什麼是chunk,什麼是module?
- bundle:有webpack打包出來的文件
- chunk:webpack在進行模塊的依賴分析的時候,代碼分割出來的代碼塊
- module:開發中的單個模塊
webpack-dev-server和http服務器如nginx有什麼區別?
webpack-dev-server使用內存來存儲webpack開發環境下的打包文件,並且可以使用模塊熱更新,他比傳統的http服務對開發更加簡單高效。
DefinePlugin
DefinePlugin :允許創建一個在編譯時可以配置的全局變量
- DllPlugin
使用DllPlugin可以減少基礎模塊編譯次數,動態鏈接庫插件,其原理是吧網頁依賴的基礎模塊抽離出來打包到dll文件中,當需要導入的模塊存在於某個dll中時,這個模塊不再被打包,而是去dll中獲取。在dll中大多包含的時常用的第三方模塊,只要這些模塊版本不升級,就只需要被編譯一次。
注意
DllPlugin參數中的name必須要和output.library值保持一致,並且生成的mainfest文件中會引用output.library值
happyPack開啓多線程loader轉換
運行在node.js之上的webpack時單線程模型,也就是隻能一個一個文件進行處理,不能並行處理,happypack可以將任務分解給多個子進程,最後將結果發給主進程,js是單線程模型,只能通過這種多線程的方式提高性能
參考文件:
https://segmentfault.com/a/1190000015883378