這個(gè)題目實(shí)際上就是來(lái)回答 webpack 是干啥的，你對(duì)webpack的理解，都是一個(gè)問(wèn)題。
（1）對(duì) webpack 的理解
webpack 為啥提出 + webpack 是啥 + webpack 的主要功能
前端開(kāi)發(fā)通常是基于模塊化的，為了提高開(kāi)發(fā)效率，webpack 是一個(gè)基于模塊的構(gòu)建工具，是一個(gè)用于 js 應(yīng)用程序的靜態(tài)模塊打包工具。
Webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具，它能夠?qū)⒍鄠€(gè) JavaScript 文件打包成一個(gè)或多個(gè)文件，以及將各種資源（如樣式表、圖片等）轉(zhuǎn)換成代碼。通過(guò)合理配置，可以借助 Webpack 來(lái)優(yōu)化前端性能。以下是一些優(yōu)化前端性能的常見(jiàn)方法：
靜態(tài)模塊是指開(kāi)發(fā)階段，可以被 webpack 引用的資源文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-830119.html
（2）webpack 的主要功能有
- 模塊打包：webpack 將項(xiàng)目中的各種模塊、文件，以及它們之間的依賴關(guān)系打包成靜態(tài)資源文件，供瀏覽器使用
- 加載器【loader】：webpack 支持使用加載器來(lái)處理非js文件，如將es6/7代碼轉(zhuǎn)換成es5【babel-loader】、處理css 前綴【postcss-loader】等
- 插件系統(tǒng)【plugin】：webpack 有豐富的插件系統(tǒng)，可以實(shí)現(xiàn)代碼壓縮、文件合并、代碼分割、資源優(yōu)化等功能。
- 開(kāi)發(fā)服務(wù)器：webpack 提供開(kāi)發(fā)服務(wù)器，在開(kāi)發(fā)過(guò)程中提供實(shí)時(shí)的熱更新功能
- 自動(dòng)化構(gòu)建：可以通過(guò)配置文件來(lái)定義構(gòu)建任務(wù)，實(shí)現(xiàn)自動(dòng)化構(gòu)建。
- 支持多種模塊化規(guī)范：cjs、amd、es6
- 代碼優(yōu)化：使用插件可以實(shí)現(xiàn)代碼壓縮、去除無(wú)用代碼、提取公共代碼等
（3）webpack 優(yōu)化性能
重點(diǎn)，webpack 的這些優(yōu)化文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-830119.html
- 都下載配置文件的?optimization 屬性中
- 都使用插件 plugin 進(jìn)行優(yōu)化，處理壓縮圖片使用的是loader
- 代碼拆分：webpack 支持將代碼分成多個(gè) bundle，使應(yīng)用程序可以按需加載，或并行加載這些文件，提高頁(yè)面加載速度
- 使用 【splitChunksPlugin】，該插件webpack 已經(jīng)默認(rèn)安裝和集成，可以直接配置使用
- 內(nèi)聯(lián) chunk
- 使用【inline-chunk-html-plugin】插件將一些 chunk 的模塊內(nèi)聯(lián)到 html
- 懶加載：結(jié)合代碼分割，可以將不同頁(yè)面或組件的代碼分割成獨(dú)立的文件，按需加在，減少初始化加載時(shí)間，提升頁(yè)面響應(yīng)速度。
-
代碼壓縮?：js/css/html 代碼都
- 【terser-webpack-plugin】 js 壓縮丑化js
- 【css-minimizer-webpack-plugin】css，去除無(wú)用空格等
- 【html-webpack-plugin】html，配置minify 屬性，實(shí)際會(huì)使用另一個(gè)插件
html-minifier-terse
- 文件大小壓縮：對(duì)文件大小進(jìn)行壓縮，減少 http 傳輸中的寬帶損耗
- 圖片壓縮：使用【image-webpack-loader】注意這個(gè)是 loader
- 對(duì)js/css等壓縮：使用【compression-webpack-plugin】
-
Tree Shaking:? 特性來(lái)剔除未使用的代碼，減少打包后文件的大小
- js 的有兩種方案
- usedExports：true，通過(guò)標(biāo)記某些函數(shù)是否被使用，之后通過(guò) terser /?ters?r/?來(lái)進(jìn)行優(yōu)化【這個(gè)terser 就是上面上到的壓縮js的插件terser-webpack-plugin】
- sideEffects: false，跳過(guò)整個(gè)模塊/文件，直接查看該文件是否有副作用
- css Tree Shaking: 使用【purgecss-plugin-webpack】
- js 的有兩種方案
到了這里，關(guān)于【前端工程化面試題】使用 webpack 來(lái)優(yōu)化前端性能/ webpack的功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
