webpack優(yōu)化目的

1. 提升開發(fā)體驗(yàn)
2. 提升打包構(gòu)建速度
3. 減少代碼體積
4. 優(yōu)化代碼運(yùn)行性能

1. 提升開發(fā)體驗(yàn)

提升開發(fā)體驗(yàn)使用 SourceMap

1. 問題：正常情況下，開發(fā)環(huán)境不輸出dist 文件 直接保存在內(nèi)存中，瀏覽器控制臺source中可以看到，
   但是報(bào)錯(cuò)提示行數(shù)不正確，它會以打包后的行數(shù)進(jìn)行提示

2. 解釋：sourceMap 可以生成源代碼與打包代碼一一映射的關(guān)系，方便找到出錯(cuò)源行數(shù)

3. 使用方案：有兩種模式，cheap-module-source-map | source-map
   source-map 行列都提示，運(yùn)行慢 c-m-s-m 提示行出錯(cuò)
   這里有歧義：視頻講解生產(chǎn)用s-m 開發(fā)用 c-m-s-m
   實(shí)際可能用 生產(chǎn)：禁用 開發(fā)：用c-m-s-m

4. 正常使用：在webpack配置文件中 devtool：“cheap-module-source-map” 直接添加一句即可

2. 提升打包構(gòu)建速度

提升打包構(gòu)建速度（開發(fā)模式）

1. HotModuleReplacement （HMR熱模塊替換） devServer 中 hot：true（W5默認(rèn)值） !!!生產(chǎn)環(huán)境不推薦使用

2. 注意：js文件不會熱替換，如果需要可以在main.js中寫上
   //判斷是否支持HMR功能，如果支持js也熱替換
   if（module.hot）{
   module.hot.accept(./js/count)
   }

3. 在react 和 vue 中 vue框架內(nèi)部集成了 React Hot Loader 來解決
   react hot loader 下載之后 添加到babel-loader的option選項(xiàng)中的plugins中，并在根組件使用，使用方法chatgpt

提升打包速度 oneOf

1. 使用 ：webpack配置文件中 創(chuàng)建一個(gè)對象oneOf包裹所有的loader，
2. 原理： 打包時(shí)oneOf只使用一個(gè)loader 速度更快，不用遍歷所有的loader

提升打包速度 include（包含）/exclude（排除）

1. 使用 ：include：path.resolve(__dirname,“…/src”) __dirname當(dāng)前執(zhí)行腳本的絕對路徑
   exclude:“node_modules”
2. 注意：主要針對js 文件babel 和 eslint

提升第二次打包速度 Cache （緩存）

1. 原理：js文件每次打包都要經(jīng)過eslint檢查，babel編譯，可以對其緩存
2. 使用：在babel的option選項(xiàng)配置中 開啟緩存 eslint 插件中也開啟緩存

提升打包速度 Thead

1. 原理：對于js文件的處理主要是 eslint、babel、teser（內(nèi)部供生產(chǎn)環(huán)境壓縮js文件使用）三個(gè)工具，通過使用Thead可以開啟電腦多進(jìn)程同時(shí)處理js文件
2. 注意：在特別耗時(shí)的操作中使用，因?yàn)槊總€(gè)進(jìn)程的啟動大約有600ms左右開銷
3. 使用：
   1. 獲取cpu的核數(shù)，每個(gè)電腦不一樣
   node.js核心模塊直接使用
   const os = require(“os”)
   cpu核數(shù)
   const threads = os.cpus().length
   2. 安裝 npm i thread-loader -D
   3. 在babel-loader 和 eslint插件中開啟多進(jìn)程
   4. 使用TeserWebpackPlugin（無需下載）開啟多進(jìn)程壓縮js文件

3. 減少代碼體積

減少代碼體積（Tree Shaking）

1. Tree Shaking 不需要配置webpack默認(rèn)開啟
2. 作用：旨在移除未使用的代碼（未引用的模塊、函數(shù)、變量等），從而減少最終打包后的文件大小。

減少代碼體積（Babel）

1. 原理：babel會為編譯的每個(gè)文件都插入輔助代碼，使代碼的體積過大
   Babel對一些公共方法使用了非常小的輔助代碼，比如extend. 默認(rèn)情況下會被添加到每一個(gè)需要它的文件中。
   你可以使用runtime將這些輔助代碼作為一個(gè)獨(dú)立模塊,來避免重復(fù)引入。
2. 介紹：runtime 禁用了babel自動對每個(gè)文件的runtime注入，而是引入；
   并且使所有的輔助代碼從這里引用
3. 使用： npm i @babel/plugin-transform-runtime -D
   插件放到babel中

減少代碼體積（Image minimizer）

1. 原理：打包時(shí)對圖片進(jìn)行壓縮
2. 使用： npm i image-minimizer-webpack-plugin imagemin -D
   無損壓縮：npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
   有損壓縮：npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
3. 注意：有損、無損安裝一個(gè)即可，這里在安裝的時(shí)候可能會安裝不上，使用cnpm單獨(dú)安裝imagemin-gifsicle

優(yōu)化代碼的運(yùn)行性能 （code split）

1. 原理：打包時(shí)會將所有的js文件打包到一個(gè)文件中，code split 可以
   將打包生成的文件進(jìn)行分割，生成多個(gè)js文件，需要那個(gè)文件就加載那個(gè)文件

2. 使用：見wpcodeSplitTest，webpack配置 無需下載

3. 在動態(tài)加載文件時(shí)，會單獨(dú)進(jìn)行打包，當(dāng)需要時(shí)自動加載

4.優(yōu)化代碼的運(yùn)行性能

優(yōu)化代碼的運(yùn)行性能 （preload / prefetch)

1. 原理： 我們在使用split之后，代碼按需加載會卡頓。
   preload ：告訴瀏覽器立即加載資源（優(yōu)先級高，只加載當(dāng)前頁面）
   prefetch ：告訴瀏覽器在空閑時(shí)間加載 （可以加載當(dāng)前頁面。也可以加載其他頁面）
   他們都只會加載資源，并不執(zhí)行
   都有緩存

2. 缺點(diǎn)：兼容性差，preload不兼容ie，prefetch（60%）不兼容safri 建議使用preload（92%瀏覽器支持）

3. 使用： npm i -D preload-webpack-plugin
   const PreloadWebpackPlugin = require(“preload-webpack-plugin”)
   放到htmlplugin后面，
   new PreloadWebpackPlugin()

優(yōu)化代碼的運(yùn)行性能 （network cache)

1. 原理 ：當(dāng)緩存文件發(fā)生變化，一般所有都更新，加上這個(gè)只更新修改的文件，其他緩存文件不變
2. 使用 ：
   runtimeChunk: {
   name: (entrypoint) => runtime~${entrypoint.name}.js
   }

優(yōu)化代碼的運(yùn)行性能 （core.js)

1. 原理： 我們使用babel打包時(shí)能對es6進(jìn)行編譯轉(zhuǎn)換，但是promise、async等無法編譯，放到一些瀏覽器就會有兼容性問題，直接報(bào)錯(cuò)

2. 概念：core.js專門用來做es6以上的polyfill（補(bǔ)?。?/p>

3. 使用：
   npm安裝
   修改main.js
   import “core-js”; 會有一個(gè)問題是打包出來的文件比較大

    所以我們可以根據(jù)需要的兼容引入 
    import "core-js/es/promise"
   
    更好的方法
    在babel.config.js中配置
      presets: [
       [
         "@babel/preset-env",
        {
           useBuiltIns: "usage",  // 按需引入corejs
            corejs: 3,
        },
      ],
     ],
   

優(yōu)化代碼的運(yùn)行性能 （PWA)

漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序 離線時(shí)也能繼續(xù)運(yùn)行功能（正常情況下不可以）

使用：插件webpack Workbox 見官網(wǎng)
npm install workbox-webpack-plugin --save-dev
const WorkboxPlugin = require(‘workbox-webpack-plugin’);
plugins: [
new HtmlWebpackPlugin({
title: ‘Output Management’,
title: ‘Progressive Web Application’,
}),
new WorkboxPlugin.GenerateSW({
// 這些選項(xiàng)幫助快速啟用 ServiceWorkers
// 不允許遺留任何“舊的” ServiceWorkers
clientsClaim: true,
skipWaiting: true,
}),
],

在main.js 添加
 if ('serviceWorker' in navigator) {

window.addEventListener(‘load’, () => {
navigator.serviceWorker.register(‘/service-worker.js’).then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}文章來源地址http://www.zghlxwxcb.cn/news/detail-616839.html

到了這里，關(guān)于webpack優(yōu)化前端框架性能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！