懶加載 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版本

• 安裝后打包css文件保存，版本不匹配（不要去百度，網上搜的都告訴你是sass-loader版本的問題，可我都沒有使用.scss文件啊）
• 回退到一年前的版本npm
• package.json

"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} }

總結

以上是生活随笔為你收集整理的Webpack进阶（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

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