1.提升開發(fā)體驗(yàn)
SourceMap技術(shù)
作用：準(zhǔn)確找到報(bào)錯(cuò)位置淀弹，便于開發(fā)
用法：
開發(fā)模式：cheap-module-source-map
優(yōu)點(diǎn)：打包編譯速度快傅瞻，只包含行映射
缺點(diǎn)：沒有列映射
生產(chǎn)模式：source-map
優(yōu)點(diǎn)：包含行/列映射
缺點(diǎn)：打包編譯速度更慢
2.提升打包構(gòu)建速度
HMR：熱更新赤炒，只更新編譯的部分而不是刷新整個(gè)界面，想要實(shí)現(xiàn)js頁面需要單獨(dú)配置或者引入所需loader
oneOf：每個(gè)文件只能被其中一個(gè)loader配置處理
Include/Exclude
Include:只處理XXX文件
Exclude：處理XXX文件以外其他文件都處理
Cache
對eslint檢查和Babel編譯結(jié)果進(jìn)行緩存
Thead
多進(jìn)程打包：開啟電腦的多個(gè)進(jìn)程干一件事，速度更快
使用：
1.獲取CUP的核數(shù)
2.下載包
npm i thread-loader -D
3.配置
3.減少代碼體積
Tree Shaking
移除js中沒有使用上的代碼
Babel
@babel/plugin-transform-runtime：禁用Babel自動(dòng)對每個(gè)文件的runtime注入帮非，而是引入
1.下載包
npm i @babel/plugin-transform-runtime -D
2.配置
Image Minimizer
是什么：
image-minimizer-webpack-plugin：用來壓縮圖片的插件
用法：
1.下載包
npm i?image-minimizer-webpack-plugin imagemin -D
無損壓縮：
npm i imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D?
有損壓縮：
npm i imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D?
2.配置
4優(yōu)化代碼運(yùn)行性能
codeSplit
是什么：
代碼分割：將打包生成的文件進(jìn)行分割，生成多個(gè)js文件
按需加載：需要哪個(gè)文件就加載那個(gè)文件
Preload/Prefetch
在瀏覽器空閑時(shí)加載后續(xù)需要使用的資源
preload:告訴瀏覽器立即加載資源讹蘑。
prefetch:告訴瀏覽器在空閑時(shí)才開始加載資源
共同點(diǎn)：
都會(huì)加載資源但不執(zhí)行
都有緩存
區(qū)別：
preload優(yōu)先級(jí)高末盔，prefetch優(yōu)先級(jí)低
preload只能加載當(dāng)前頁面所需要使用的資源，prefetch可以加載當(dāng)前頁面資源座慰，也可以加載下一個(gè)頁面需要使用的資源
總結(jié)：
當(dāng)前頁面優(yōu)先級(jí)高的資源用preload加載
下一頁面需要使用的資源用preload加載
怎么用：
1.下載包
npm i --save-dev @vue/preload-webpack-plugin
2.引入
3.配置
core-js
處理ES6及以上API的polyfill
polyfill翻譯過來叫墊片/補(bǔ)丁陨舱。讓我們在不兼容某些新特性的瀏覽器上，使用該新特性
怎么用
1.下載包
npm i core-js
2.引入
在babel中配置
PWA
項(xiàng)目在離線時(shí)應(yīng)用程序能夠繼續(xù)運(yùn)行功能
怎么用
1.下載包
npm i workbox-webpack-plugin --save-dev
2.配置
總結(jié)
從4個(gè)角度對webpack和代碼進(jìn)行優(yōu)化
1.提升開發(fā)體驗(yàn)
使用Source Map讓開發(fā)上線時(shí)代碼報(bào)錯(cuò)能力更加準(zhǔn)確的錯(cuò)誤提示
2.提升webpack打包構(gòu)建速度
使用HotModuleReplacement讓開發(fā)時(shí)之重新編譯打包更新變化了的代碼游盲，不變的代碼使用緩存，從而使更新速度更快
使用Oneof讓資源一旦被某個(gè)loader處理就不繼續(xù)遍歷了蛮粮，打包速度更快
使用Include/Exclude排除或只檢測某些文件益缎，處理的文件更少，速度更快
使用Cache對eslint和babel處理的結(jié)果進(jìn)行緩存蝉揍，第二次打包速度更快
使用Thead多進(jìn)程處理eslint和babel任務(wù)，速度更快畦娄。
3.減少代碼體積
使用Tree Shaking剔除了沒有使用的多于代碼又沾，讓代碼體積更小
使用@babel/plugin-transform-runtime插件對babel進(jìn)行處理弊仪，讓輔助代碼從中引入，而不是每個(gè)文件都生成輔助代碼杖刷，從而體積更小
使用Image Minimizer對項(xiàng)目中圖片進(jìn)行壓縮励饵，體積更小請求速度更快
4.優(yōu)化代碼運(yùn)行性能
使用Code Split對代碼進(jìn)行分割成多個(gè)js文件，從而使單個(gè)文件體積更小滑燃，并行加載js速度更快役听。并通過import動(dòng)態(tài)導(dǎo)入語法進(jìn)行按需加載，從而達(dá)到需要時(shí)才加載該資源表窘，不用時(shí)不加載資源
使用Preload/Prefetch對代碼進(jìn)行提前加載典予，等未來需要使用時(shí)直接使用，讓用戶體驗(yàn)更好
使用Network Cache能對輸出資源文件進(jìn)行更好的命名乐严，將來好做緩存
使用core-js 對js進(jìn)行兼容處理
使用PWA讓項(xiàng)目在離線狀態(tài)下也能訪問
