webpack 4
1. 自動清空構建目錄
# webpack.config.js 中
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
# webpack.config.js [plugins 中]
new CleanWebpackPlugin(),
2. 補齊 css3 字首
browlist: https://browserl.ist/
Github: https://github.com/browserslist/browsersli...
npm i -D postcss-loader autoprefixer
# webpack.config.js [module.rules 中]
{
test: /\.less/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 2 version', '>1%']
}),
]
}
},
'less-loader',
]
},
3. px 轉換為 rem
npm i -D px2rem-loader
# css
.search-text {
font-size: 20px;
color: red;
display: flex;
border-radius: 4px; /*no*/
}
/*no*/ 表示不進行轉換
# webpack.config.js [module.rules 中]
{
test: /\.less/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')(),
]
}
},
{
loader: 'px2rem-loader',
options: {
// 1rem = 75px
remUnit: 75,
// 精度
remPrecision: 8
}
},
'less-loader'
]
},
4. 靜態資源內聯
程式碼層⾯
- ⻚⾯框架的初始化指令碼
- 上報相關打點
- css 內聯避免⻚⾯閃動
請求層⾯:減少 HTTP ⽹絡請
- ⼩圖⽚或者字型內聯 (url-loader)
npm i -D raw-loader@0.5.1
# 手淘的 自動計算 font-size 指令碼
npm i lib-flexible
4.1 HTML, JS 內聯
使用 raw-loader
... <head> ${ require('raw-loader!./meta.html') } <title>Document</title> <script>${ require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js') }</script> </head> ...
4.2 css 內聯
- style-loader
- html-inline-css-webpack-plugin
5. sourcemap
sourcemap 關鍵字 | 說明 |
---|---|
eval | 使⽤ eval 包裹模組程式碼 |
source map | 產⽣ .map ⽂件 |
cheap | 不包含列資訊 |
inline | 將 .map 作為 DataURI 嵌⼊,不產⽣ .map ⽂件 |
module | 包含 loader 的 sourcemap |
# webpack.config.js 中
devtool: 'source-map'
6. 提取公共庫
6.1 使用 html-webpack-externals-plugin 外掛提取
將公共庫(比如 jquery) 從 bundle.js 中提取出來.
文件: https://www.npmjs.com/package/html-webpack...
npm i -D html-webpack-externals-plugin
# webpack.config.js 中
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
# webpack.config.js [plugins 中, **放在 HtmlWebpackPlugin 例項之後**]
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'jquery',
entry: 'dist/jquery.min.js',
global: 'jQuery',
},
],
}),
6.2 使用 SplitChunksPlugin(webpack 4內建) 外掛提取
# webpack.config.js 中
optimization: {
splitChunks: {
cacheGroups: {
jqueryA: {
chunks: "all",
test: /jquery/,
name: "jquery",
},
}
}
},
# 引入到 html 檔案中, 需要在 html-webpack-plugin 的例項配置 chunks 中加上 jquery
chunks:
async 非同步引⼊的庫進⾏分離(預設)
initial 同步引⼊的庫進⾏分離
all 所有引⼊的庫進⾏分離(推薦)
6.3 提取公共資源
# webpack.config.js 中
optimization: {
splitChunks: {
cacheGroups: {
...
commons: {
chunks: "all",
name: "commons",
minChunks: 2,
minSize: 0
}
}
}
},
minChunks: 最少引用次數, >= 這個次數才會提取出來
minSize: 提取出來的檔案的最小size. 如果小於設定的值是不會提取的
7. Tree Shaking (webpack4 mode: production的情況下, 預設開啟)
通俗的解釋: 用到的方法打包, 用不到的方法不打包(去掉)
那麼這個 用到的 又如何理解呢?
- 程式碼不會被執行, 不可到達
- 程式碼的執行結果不會被用到
- 程式碼只會影響死變數(只寫不讀)
如果程式碼有副作用, Tree Shaking 會失效.
副作用這個概念來源於函數語言程式設計(FP),純函式是沒有副作用的,也不依賴外界環境或者改變外界環境。純函式的概念是:接受相同的輸入,任何情況下輸出都是一樣的。
非純函式存在副作用,副作用就是:相同的輸入,輸出不一定相同。或者這個函式會影響到外部變數、外部環境。
函式如果呼叫了全域性物件或者改變函式外部變數,則說明這個函式有副作用.必須是 es6 語法, commonJs 不支援
8. Scope Hoisting (webpack4 mode: production的情況下, 預設開啟)
原理: 將所有模組的程式碼按照引用順序放在一個函式作用域裡, 適當的重新命名一些變數以防止命名衝突.
簡單的理解就是: 減少了閉包數量, 從而減少了記憶體消耗. 但是對於引用次數 >1 的模組是無法進行此項優化的.
9. 動態 import
import('').then();
10. eslint
eslint-config-alloy: https://github.com/AlloyTeam/eslint-config...
eslint-config-airbnb: https://github.com/airbnb/javascript/tree/...
eslint rules: http://eslint.cn/docs/rules/
11. 優化構建時日誌顯示
# webpack.config.js 中
stats: 'minimal'
# 更有好的顯示構建結果
npm i -D friendly-errors-webpack-plugin
# webpack.config.js 中
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
# webpack.config.js [plugins 中]
new FriendlyErrorsWebpackPlugin()
本作品採用《CC 協議》,轉載必須註明作者和本文連結