目錄

開發環境性能優化

生產環境性能優化

開發環境性能優化

• 優化打包構建速度
  • HMR
• 優化代碼調試
  • source-map

HMR

?

概念：「HMR：」 hot module replacement 熱模塊替換 / 模塊熱替換

?

作用：一個模塊發生變化，只會重新打包這一個模塊，而不是打包所有模塊，極大的提升了構建速度

樣式文件：可以使用 HMR 功能：因為 style-loader 內部已經實現

js 文件：默認不能使用 HMR 功能：開啟需要添加支持 HMR 功能的 js 代碼，且只能處理 「非入口 js 文件」(入口文件將其它文件全部引入，若添加，會導致全部重新加載)

html 文件：默認不能使用 HMR 功能，同時會導致 「html 文件不能熱更新」了
解決：修改 「entry」 入口，將 html 文件引入

module.exports = {
// 引入html，解決熱更新的問題
entry: ['./src/js/index.js', './src/index.html'],
devServer: {
// 開啟 HMR 功能
// 當修改了 webpack 配置，新配置要想生效，必須重啟服務
hot: true
}
}

source-map

?

概念：一種提供源代碼構建后代碼映射技術(如果構建后代碼出錯了，可以通過映射追蹤到源代碼錯誤)

?

• 參數：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
  • source-map：外部(錯誤代碼的準確信息 和 位置)
  • inline-source-map：內聯(只生成一個內聯 source-map)(錯誤代碼的準確信息 和 位置)
  • hidden-source-map：外部(直接生成 .map 文件)(不能追蹤源代碼錯誤，只能提示到構建后代碼的錯誤位置)
  • eval-source-map：內聯(每一個文件都生成對應的 source-map，都在 eval)(錯誤代碼的準確信息 和 位置)
  • nosources-source-map：外部(錯誤代碼的準確信息，沒有源代碼信息)
  • cheap-source-map：外部(錯誤代碼的準確信息 和 位置，但只能精確到行)
  • cheap-module-source-map：外部(錯誤代碼的準確信息 和 位置，會將 loader 的 source-map 加入)
• 開發環境：速度快，調試更友好。eval-source-map / eval-cheap-module-source-map
  (vue 和 react 腳手架中默認使用：eval-source-map)
  • 速度快：(eval > inline > cheap > ...)eval-cheap-source-map、eval-source-map、
  • 調試友好：source-map、cheap-module-source-map、cheap-source-map
• 生產環境：源代碼要不要隱藏？調試要不要更友好？source-map / cheap-module-source-map
  內聯會讓代碼體積變大，所以在生產環境中只會只用 「外部 source-map」nosources-source-map、hidden-source-map

module.exports = {
mode: 'development', // 'production'
devtool: 'eval-source-map' // 'source-map'
}

生產環境性能優化

• 優化打包構建速度
  • oneOf
  • babel 緩存
  • 多進程打包
  • externals
  • dll
• 優化代碼運行的性能
  • 緩存(hash -> chunkhash -> contenthash)
  • tree shaking
  • code split
  • 懶加載/預加載
  • PWA

oneOf

?

oneOf：避免了每一個文件都要被 loader 過一次 注：不能有兩個配置處理同一種類型文件

?module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
//優先執行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只會匹配一個
oneOf: [
...,
{},
{}
]
}
]
}
}

cache(緩存)

babel 緩存
讓第二次打包構建速度更快

module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
// 開啟 babel 緩存
// 第二次構建時，會讀取之前的緩存
cacheDirectory: true
}
}
]
}
}

文件資源緩存
讓代碼上線運行緩存更好使用

• hash：每次 webpack 構建時會生成一個唯一的 hash 值
  問題：因為 js 和 css 是同時使用一個 hash 值(如果重新打包會導致所有文件緩存都失效)
• chunkhash：根據 chunk 生成 hash 值。如果打包來源于同一個 chunk，那么 hash 值就一樣
  問題：js 和 css 的 hash 值還是一樣的
  因為 css 是在 js 文件中被引入的，所以同屬于一個 chunk
• 「contenthash」：根據文件的內容生成 hash 值。不同文件的 hash 值移動不一樣

tree shaking(搖樹)

?

tree shaking：去除無用的代碼

?

前提：1. 必須使用 ES6 模塊化；2. 開啟 production 環境
作用：減少代碼體積
在 package.json 中配置：

• "sideEffects": false 所有的代碼都沒有副作用(都可以進行 tree shaking)
  問題：可能會把 css / @babel/polyfill (副作用)文件干掉
• sideEffects: ["*.css", "*.less"]

code split(代碼分割)

多入口形式：

module.exports = {
entry: {
// 多入口
main: './src/js/index.js',
test: './src/js/test.js'
},
output: {
// [name]: 取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
mode: 'production'
}

optimization：

module.exports = {
entry: './src/js/index.js',,
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build')
},
// 可以將 node_modules 中的代碼單獨打包一個chunk最終輸出
optimization: {
splitChunks: {
chunks: 'all'
}
}
mode: 'production'
}

「某個文件的單獨打包」

// import動態導入語法：能將某個文件單獨打包成一個 chunk
// 此處的注釋可以命名打包后文件名
import(/* webpackChunkName: 'test' */ './test.js')
.then(() => {})
.catch(() => {})

懶加載 和 預加載

?

懶加載：當文件需要時才加載

??

預加載 prefetch：會在使用前，提前加載 js 文件。等其他資源加載完畢，瀏覽器空閑了，在偷偷加載資源

??

正常加載可以認為是并行加載(同一時間加載多個文件)

?// import動態導入語法：能將某個文件單獨打包成一個 chunk
// webpackChunkName 此處的注釋可以命名打包后文件名，webpackPrefetch 預加載
import(/* webpackChunkName: 'test', webpackPrefetch: true */ './test.js')
.then(() => {})
.catch(() => {})

PWA

?

PWA：漸進式網絡開發應用程序(離線可訪問)

?

插件：workbox --> npm i workbox-webpack-plugin -D

module.exports = {
plugins: [
new WorkboxWebpackPlugin.GenerateSW({
// 1. 幫助 serviceworker 快速啟動
// 2. 刪除舊的 serviceworker
// 生成一個 serviceworker 配置文件
clientsClaim: true,
skipWaiting: true
})
]
}

注冊 serviceworker，并處理兼容性問題

eslint 不認識 window、navigator 等全局變量
解決：需要修改 package.json 中 eslintConfig 配置

"env": {
"browser": true
}

sw 代碼必須運行在服務器上

// 注冊 serviceworker，并處理兼容性問題
if ('serviceworker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceworker
.register('/service-worker.js')
.then(() => {
console.log('sw注冊成功了')
})
.catch(() => {
console.log('sw注冊失敗了')
})
})
}

多進程打包

插件：npm i thread-loader -D
進程啟動大概為 600ms，進程通信也有開銷。只有工作消耗品時間比較長，才需要多進程打包。

module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
// 開啟多進程打包
'thread-loader',
{
loader: 'babel-loader',
options: {
presets: []
}
}
]
}
]
}
}

externals

設置拒絕打包的庫

module.exports = {
externals: {
// 忽略庫名 --> npm包名
jquery: 'jQuery'
}
}

在入口 index.html 引入 CDN

dll

對代碼進行單獨打包，(第三方庫：jQuery，react，vue ...)，第二次以后打包時不再打包第三方庫。webpack.dll.js 文件：
注：運行 webpack 時，默認查找 webpack.config.js，需要運行 webpack.dll.js 文件時，可以通過運行 webpack --config webpack.dll.js 實現運行

const { resolve } = require('path')
const webpack = require('webpack')

module.exports = {
entry: {
// 最終打包生成的[name] --> jquery
// ['jquery'] --> 要打包的庫是 jquery
jquery: ['jquery']
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash]' // 打包的庫里面向外暴露的內容的名字
},
plugins: [
// 打包生成一個 manifest.json --> 提供和 jQuery 映射
new webpack.DllPlugin({
name: '[name]_[hash]', // 映射庫的暴露的內容名稱
path: resolve(__dirname, 'dll/manifest.json')
})
],
mode: 'produciton'
}
const { resolve } = require('path')
const webpack = require('webpack')

module.exports = {
plugins: [
// 告訴webpack哪些庫不參與打包，同時使用名稱改變
new webpack.DllReferencePlugin({
path: resolve(__dirname, 'dll/manifest.json')
}),
// 將某個文件打包輸出，并在html中自動引入
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})
],
mode: 'produciton'
}

◆?◆?◆ ?◆?◆

你的在看我當成喜歡

總結

以上是生活随笔為你收集整理的webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。