懶加載 lazy loading

• 用到的時候才加載
• vue 首屏不加載
• index.js

const oBtn = document.getElementById('j-button')
oBtn.onclick = async function () {const div = await createElement()document.body.appendChild(div)
}
async function createElement() {const { default: _ } = await import(/* webpackChunkName: "my-loadsh" */ 'lodash')const res = _.join([1, 2, 3], '*')const div = document.createElement('div')div.innerText = resreturn div
}

• 支持async await語法
• webpack.base.js配置options

// cnpm install --save-dev @babel/plugin-transform-runtime
{test: /\.js$/,use: {loader: 'babel-loader',options: {plugins: ["@babel/plugin-transform-runtime"]}},exclude: path.resolve(__dirname, 'node_modules')
},

• 點擊按鈕前
  
• 點擊按鈕
  

module chunk bundle

• 多個入口 → 生成多個chunk
• 異步引入import 生成chunk
• splitChunk也能生成chunk
• bundle：dist中的文件
  

如何找到webpack對應的loader版本

"devDependencies": {"@babel/cli": "^7.14.8","@babel/core": "^7.15.0","@babel/plugin-transform-runtime": "^7.15.0","@babel/preset-env": "^7.15.0","babel-loader": "^8.2.2","clean-webpack-plugin": "^4.0.0-alpha.0","core-js": "^3.8.3","css-loader": "^3.5.0","html-webpack-plugin": "~3.2.0","lodash": "^4.17.21","style-loader": "^1.1.4","webpack": "~4.41.5","webpack-cli": "~3.3.10","webpack-dev-server": "~3.10.1","webpack-merge": "^5.8.0"}

CSS代碼分割

css in JS

• style-loader會將css代碼放入style標簽
• index.css

body {background: orange;
}

• index.js

import './index.css';
...

• 編譯后沒有.css文件，而是在main.js中
  

使用MiniCssExtractPlugin分離css和JS

https://webpack.docschina.org/plugins/mini-css-extract-plugin/

• 安裝"mini-css-extract-plugin"
• 在生產環境使用
• webpack.prod.js
• 使用CssMinimizerPlugin壓縮css

const { merge } = require('webpack-merge')
// 公共配置
const baseConfig = require('./webpack.base')
// 生產環境 js css分離
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 壓縮
const CssMinimizerPlugin = require("CssMinimizerPlugin")
// 生產環境特有的配置
const prodConfig = {mode: 'production',devtool: 'cheap-module-source-map',// CSS JS分離plugins: [new MiniCssExtractPlugin()],optimization: {// 壓縮minimize: true,minimizer: [new CssMinimizerPlugin()],// 提取所有的 CSS 到一個文件中 會產生map映射文件splitChunks: {cacheGroups: {styles: {name: "styles",test: /\.css$/,chunks: "all",enforce: true,},},},},module: {rules: [{test: /\.css$/i,// CSS JS分離use: [MiniCssExtractPlugin.loader, "css-loader"],},],},
};module.exports = merge(baseConfig, prodConfig)

• package.json

// 忽略對css文件的tree shaking
"sideEffects": ["*.css"],

csdn效果

• 提取所有的 CSS 到一個文件中
• 基于入口提取 CSS

瀏覽器緩存（生產環境）

• 瀏覽器開啟緩存后：不會拿最新的index.js文件
• 解決：使用hash
• 根據文件內容生成hash值
• webpack.prod.js

const path = require("path");
const { merge } = require('webpack-merge')
// 公共配置
const baseConfig = require('./webpack.base')
// 生產環境特有的配置
const prodConfig = {mode: 'production',devtool: 'none',output: {// 文件內容帶哈希值filename: '[contenthash].bundle.js',path: path.resolve(__dirname, "../dist"),},
};module.exports = merge(baseConfig, prodConfig)

• 限制位數filename: '[name].[contenthash:8].js',
  

Shimming

• 比如第三方庫使用了Jquery，但又沒有引入，也不便于修改第三方庫的源代碼，就需要使用。官方案例如下：
  https://webpack.docschina.org/guides/shimming/#root

webpack5

• 版本查詢
• npm info webpack version(當前版本)
• npm info webpack versions(歷史版本)
  

webpack5

• 對被不同文件引入的string.js，在webpack中配置
• string.js會被分割，打包到common.js

optimization:{splitChunks:{chunks: 'all',minSize: 0,cacheGroups: {vendors:{// 對第三方庫的打包 如lodashtest: /[\\/]node_modules[\\/]/,priority: -10,		filename: 'vnedors.js',minChunks: 1}			default:{filename: 'common.js',priority: -20,	minChunks: 2}}}
}

• webpack打包后會自動生成一些箭頭函數，可以這樣配置來關閉

output:{environment:{arrowFunction: false}
}