一、webpack 性能優化之 HRM
-
創建空文件夾，通過
npm init命令初始化package.json文件，通過npm install webpack webpack-cli -g命令全局下載webpack和webpack-cli，通過npm install webpack webpack-cli -D命令本地下載webpack和webpack-cli，通過npm i style-loader css-loader -D命令下載style-loader和css-loader，通過npm i less less-loader -D命令下載less和less-loader，通過npm i html-webpack-plugin -D命令下載html-webpack-plugin插件，通過npm i url-loader file-loader -D命令下載url-loader和file-loader，通過npm i html-loader -D命令下載html-loader。 -
創建
src文件夾，在裏面創建css、js、imgs和media文件夾，以及index.html。css文件夾中放index.less和字體圖標資源樣式，js文件夾中放index.js和print.js，imgs文件夾中放圖片資源，media文件夾放字體圖標的相關資源，代碼如下所示：
-
index.less
#box { width: 200px; height: 200px; background-image: url('../imgs/angular.jpg'); background-repeat: no-repeat; background-size: 100% 100%; } -
index.js
// 引入 import print from './print.js'; import '../css/iconfont.css'; import '../css/index.less'; console.log('index.js 文件被加載') print() function add(x, y) { return x + y; } console.log(add(1, 2)); if (module.hot) { module.hot.accept('./print.js', function () { print(); }) } -
print.js
// 引入 import print from './print.js'; import '../css/iconfont.css'; import '../css/index.less'; console.log('index.js 文件被加載') print() function add(x, y) { return x + y; } console.log(add(1, 2)); if (module.hot) { module.hot.accept('./print.js', function () { print(); }) } -
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>開發環境</title> </head> <body> <h1>開發環境配置</h1> <span class="iconfont icon-icon-test"></span> <span class="iconfont icon-icon-test2"></span> <span class="iconfont icon-icon-test3"></span> <span class="iconfont icon-icon-test1"></span> <div id="box"></div> <img src="./imgs/vue.jpg" alt="vue"> <img src="./imgs/react.png" alt="react"> </body> </html>
- 創建
webpack.config.js文件，通過require引入path和html-webpack-plugin，entry是入口文件，output是出口文件，filename是打包輸出後的文件名，path是輸出路徑。module是loader的配置，rules是詳細的loader配置。第一個規則是處理less資源，匹配以.less結尾的文件，使用的loader是style-loader、css-loader和less-loader。第二個規則是處理css資源， 匹配以.css結尾的文件，使用的loader是style-loader和css-loader。第三個規則是處理圖片資源，匹配以jpg、png和gif結尾的文件圖片資源，使用的loader是url-loader，進行options配置，limit是限制圖片的大小小於8kb，就會被base64處理，給圖片做優化，name給圖片做重命名，取hash值的前10位，取文件的原來擴展名，關閉es6模塊化，輸出路徑爲imgs。第四個規則是 處理html中的img資源，匹配以.html結尾的文件，使用的loader是html-loader。由於處理圖片資源採用的是ES6 module解析，而html文件中的img資源使用commonJS解析，會造成衝突，需要關閉ES6 module。第五個規則是處理其它資源，使用exclude不包括上面的所有資源，html|css|js|less|jpg|png|gif，使用file-loader，通過options配置name的值爲取hash值的前10位，取文件的原來擴展名，通過outputPath設置輸出路徑爲media。plugins裏面是一些插件配置，通過new HtmlWebpackPlugin()，複製裏面的文件，並自動引入打包輸出的所有資源（JS/CSS），設置mode模式爲development開發模式。在devServer中，contentBase是項目構建後路徑，compress是啓動gzip壓縮，port是端口號，open是自動打開瀏覽器，hot是開啓HRM功能，代碼如下所示：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
esModule: false,
outputPath: 'imgs'
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
hot: true
}
};
HMR是hot module replacement，熱模塊替換，也可以說是模塊熱替換。作用是一個模塊發生變化，只會重新打包這一個模塊，而不是打包所有模塊，極大提升構建速度，HRM在樣式文件、JS文件和HTML文件的不同應用：
- 樣式文件：可以使用
HMR功能，因爲style-loader內部實現了 JS文件：默認不能使用HMR功能，需要修改js代碼，添加支持HMR功能的代碼。注意的是，HMR功能對js的處理，只能處理非入口js文件的其他文件，添加代碼， 全局尋找module這個變量，有沒有hot這個屬性，一旦module.hot爲true，說明開啓了HMR功能，方法會監聽print.js文件的變化，一旦發生變化，其他模塊不會重新打包構建，會執行後面的回調函數，如下所示：
if (module.hot) {
module.hot.accept('./print.js', function () {
print();
})
}
HTML文件：默認不能使用HMR功能.同時會導致問題，html文件不能熱更新了，不用做HMR功能。如果需要做，修改entry入口，將html文件引入，代碼如下所示：
entry: ['./src/js/index.js', './src/index.html']
- 在命令行輸入
npx webpack-dev-server命令，項目就會自動打包編譯。每次在更改完代碼後，自動編譯看到最新的顯示內容。在build打包文件中，也可以看到打包後的css、js、imgs和media文件夾，以及index.html。
二、webpack 性能優化之 source-map
- 在上面
HRM熱模塊替換的項目中，修改webpack.config.js文件，添加devtool來指定不同的source-map，代碼如下所示：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
esModule: false,
outputPath: 'imgs'
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
hot: true
},
devtool: 'eval-source-map'
};
source-map是一種 提供源代碼到構建後代碼映射 技術，如果構建後代碼出錯了，通過映射可以追蹤源代碼錯誤，不同source-map之間的比較，如下所示：
| 類型 | 類型描述 | 類型方式 |
|---|---|---|
| source-map | 錯誤代碼準確信息和源代碼的錯誤位置 | 外部 |
| inline-source-map | 只生成一個內聯source-map，錯誤代碼準確信息和源代碼的錯誤位置 | 內聯 |
| hidden-source-map | 錯誤代碼錯誤原因，但是沒有錯誤位置，不能追蹤源代碼錯誤，只能提示到構建後代碼的錯誤位置 | 外部 |
| eval-source-map | 每一個文件都生成對應的source-map，都在eval，錯誤代碼準確信息 和源代碼的錯誤位置 | 內聯 |
| nosources-source-map | 錯誤代碼準確信息, 但是沒有任何源代碼信息 | 外部 |
| cheap-source-map | 錯誤代碼準確信息 和 源代碼的錯誤位置，只能精確的行 | 外部 |
| cheap-module-source-map | 錯誤代碼準確信息 和 源代碼的錯誤位置，module會將loader的source map加入 | 外部 |
- 內聯和外部的區別：
- 外部生成了文件，內聯沒有
- 內聯構建速度更快
-
開發環境需要速度快，調試更友好。在速度快中，
eval>inline>cheap>...，而eval-source-map優於eval-cheap-souce-map。在調試友好中，cheap-souce-map優於cheap-module-souce-map。所以，在開發環境中，最快調試，調試更加友好，可以選擇eval-source-map或者是eval-cheap-module-souce-map。 -
在生產環境中，需要考慮源代碼的隱藏和調試的友好。內聯會讓代碼體積變大，所以在生產環境不用內聯。
nosources-source-map是全部隱藏，hidden-source-map是隻隱藏源代碼，會提示構建後代碼錯誤信息。所以，在生成環境中，可以選擇source-map或者是cheap-module-souce-map。 -
在命令行輸入
npx webpack-dev-server命令，項目就會自動打包編譯。每次在更改完代碼後，自動編譯看到最新的顯示內容。在build打包文件中，也可以看到打包後的css、js、imgs和media文件夾，以及index.html。
三、webpack 性能優化之 oneOf
-
創建空文件夾，通過
npm init命令初始化package.json文件，通過npm install webpack webpack-cli -g命令全局下載webpack和webpack-cli，通過npm install webpack webpack-cli -D命令本地下載webpack和webpack-cli，通過npm i html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin -D命令下載html-webpack-plugin、mini-css-extract-plugin和optimize-css-assets-webpack-plugin，通過npm i eslint-loader eslint -D命令下載eslint-loader和eslint，通過npm i eslint-config-airbnb-base eslint-plugin-import eslint -D命令下載eslint-config-airbnb-base、eslint-plugin-import和eslint，eslint-config-airbnb-base依賴於eslint-plugin-import和eslint，通過npm i postcss-loeader postcss-preset-env -D命令下載postcss-loeader和postcss-preset-env，通過npm i css-loader less-loader -D命令下載css-loader和less-loader，通過npm i url-loader file-loader html-loader -D命令下載url-loader、file-loader和html-loader，通過npm i babel-loader @babel/core @babel/preset-env -D命令下載babel-loader、@babel/core和@babel/preset-env，通過npm i @babel/polyfill core-js -D命令下載@babel/polyfill和core-js。 -
創建
src文件夾，在裏面創建index.js、index.html、a.css和b.css文件，代碼如下所示：
- index.js
import '../css/a.css'; import '../css/b.css'; function add(x, y) { return x + y; } console.log(add(2, 5)); - index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1>hello webpack</h1> <div id="box1"></div> <div id="box2"></div> </body> </html> - a.css
#box1 { width: 100px; height: 100px; background-color: pink; } - b.css
#box2 { width: 200px; height: 200px; background-color: deeppink; }
- 創建
webpack.config.js文件，通過require引入path、html-webpack-plugin、mini-css-extract-plugin和optimize-css-assets-webpack-plugin。通過process.env.NODE_ENV定義nodejs環境變量：決定使用browserslist的哪個環境。定義一個複用loader，在下面匹配.css和.less文件的時候，需要重複使用。通過MiniCssExtractPlugin.loader提取css單獨文件，使用css-loader，使用postcss-loader做css的兼容性處理，同時使用postcss-preset-env做css的按需加載的兼容性處理，options是postcss-loader的配置項，ident是固定寫法，plugins是使用postcss-preset-env這個插件。entry是入口文件，output是出口文件，filename是輸出的文件名，path是文件的輸出路徑。module是loader的配置，rules是詳細的loader配置。在rules中使用oneOf，以下的loader只會匹配一個，不能有兩個配置處理同一種類型文件，如果有需要提取出來。第一個規則是匹配以.css結尾的文件，通過use使用commonCssLoader這個抽出複用的loader。第二個規則是匹配以.less結尾的文件，通過use使用commonCssLoader這個抽出複用的loader和less-loader。第三個規則是匹配以.js結尾的文件，通過exclude不包括node_modules，通過enforce優先執行，通過loader使用eslint-loader，通過options設置自動修復eslint的錯誤。第四個規則是匹配以.js結尾的文件，通過exclude不包括node_modules，通過loader使用babel-loader，通過options進行配置，presets爲預設，指示babel做怎麼樣的兼容性處理，使用babel/preset-env這個預設。通過useBuiltIns按需加載，通過corejs指定core-js版本，通過targets指定兼容性做到哪個版本瀏覽器。js兼容性處理需要使用到babel-loader、@babel/core和@babel/preset-env。如果是基本js兼容性處理，需要使用@babel/preset-env，但是隻能轉換基本語法，如promise高級語法不能轉換。如果使用全部js兼容性處理，需要使用@babel/polyfill，但是隻要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了，所有就需要做兼容性處理的就做做兼容性處理的就做，使用core-js。第五個規則是匹配以.jpg、png和gif格式的圖片資源，通過loader使用url-loader，url-loader依賴於file-loader。進行options配置，設置limit爲8 * 1024，圖片大小小於8kb，就會被base64處理，給圖片做優化。這樣做的優點是減少請求數量（減輕服務器壓力），缺點是圖片體積會更大（文件請求速度更慢）。設置esModule爲false，由於url-loader默認使用es6模塊化解析，而html-loader引入圖片是commonjs，解析時會出問題爲[object Module]，所以關閉url-loader的es6模塊化，使用commonjs解析。設置name爲[hash:10].[ext]，給圖片進行重命名，因爲圖片值爲hash，[hash:10]取圖片的hash的前10位，[ext]取文件原來擴展名。第三個規則是匹配以.html結尾的文件，使用loader爲html-loader，處理html文件的img圖片（負責引入img，從而能被url-loader進行處理）。第六個規則是匹配以.html結尾的文件，通過loader使用html-loader。第七個規則是匹配其它資源，通過loader使用file-loader，通過options進行輸出路徑配置，輸出文件夾爲media。plugins裏面是一些插件配置，通過MiniCssExtractPlugin插件提取css以及對輸出的css文件進行重命名，通過OptimizeCssAssetsWebpackPlugin對css文件進行壓縮，通過HtmlWebpackPlugin複製裏面的文件，並自動引入打包輸出的所有資源（JS/CSS），進行minify配置，通過collapseWhitespace移除空格，通過removeComments移除註釋，壓縮 html 文件。設置mode爲production，在生產環境下webpack會自動壓縮js代碼，代碼如下所示：
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'production'
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
module.exports = {
entry: 'src/js/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
oneOf: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
}
- 在
package.json這個文件中，進行配置browserslist，在css兼容處理的時候，需要幫postcss找到package.json中browserslist裏面的配置，通過配置加載指定的css兼容性樣式，development爲開發環境配置，last 1 chrome version表示兼容最近的chrome版本，last 1 firefox version表示兼容最近的firefox版本，last 1 safari version表示兼容最近的safari版本。production爲生產環境配置，>0.2%表示大於99.8%的瀏覽器，not dead表示不要已經死的瀏覽器，not op_mini all表示不要使用op_mini all瀏覽器。eslint並不知道要檢查什麼，所有就有airbnb風格指南，airbnb需要使用eslint-config-airbnb-base這個庫，這個庫依賴於eslint-plugin-import和eslint。所有需要在package.json中eslintConfig中設置檢查規則，設置extends爲airbnb-base，代碼如下所示：
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"eslintConfig": {
"extends": "airbnb-base"
}
- 在命令行輸入
webpack命令，資源就會進行打包，以及相應的壓縮代碼。