webpack学习：性能优化

本文内容如下

性能优化相关内容

如果你都有了答案，可以忽略本文章，或去webpack学习导图寻找更多答案

性能优化两大方面

一，开发环境性能优化

优化： 构建速度，代码调试

HMR热模块更新（代码调试）
source-map（代码调试）
oneOf（构建速度）
缓存（构建速度）
多进程打包（构建速度）

二，生产环境性能优化

优化： 减少请求，代码体积，加快请求速度

缓存（减少请求）
代码压缩（代码体积）
tree-shaking摇树（代码体积）
code-splitting代码分割（加快请求速度）
lazy loading懒加载/预加载（加快请求速度）
externals忽略打包（代码体积）
dll动态链接库（构建速度）

开发环境性能优化

HMR热模块替换

Hot module replacement

前景问题：有100个模块，只更新其中一个，其他99个也跟着更新，浪费资源

热更新：新代码生效，网页不刷新，状态不丢失
自动刷新：整个网页全部刷新，速度较慢，状态会丢失

css文件：可以使用HMR，因为style-loader内部实现了
js文件：不能使用HMR，需要监听执行函数，只能监听非入口文件
html文件：不能使用HMR，不需要HMR，因为只有一个html文件

1.在devServer加上这两个属性
devServer:{ hot:ture,hotOnly:ture//hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
}
2.引入webpack
const webpack = require('webpack')
3.在插件加上new webpack.HashedModuleIdsPlugin()//JS热更新：需要监听，在文件逻辑页面写
//一旦module.hot为true，说明开启了HMR功能，让HMR功能生效
if(module.hot){module.hot.accept('./a', () => { console.log(有更新就执行回调)})
}

sourceMap

源代码与打包后的代码映射关系

作用：可以快速查找代码错误，有错会报错，定位到源代码的错误地点

类型：string//关闭配置
devtool:"none"//推荐配置组合：生产环境无需设置
devtool:"cheap-module-source-map" //开发环境配置//每个关键字代表的含义
source-map：代码映射，但打包会慢，需要配置其他关键字
eval：打包速度最快的一种方式，执行效率最快，性能最好的一种打包方式。
cheap: 只监视入口文件的业务代码和打包后的js代码的准确性。
module: 不仅监视业务逻辑的错误，还会监视入口文件中引入的第三方模块以及一些loader的代码错误。

oneOf

问题：默认会执行一次所有的loader
解决：所有loader如果遇到能一个处理的，就不会再继续走下面的loader
注意：不能有两个配置处理同一种类型文件，要放在oneOf外面

module = {relus:[{eslint},{oneOf:[{test:'',use:{}         }]}         ]
},

缓存

问题：如果文件有100个，而只修改1个，这样任然需要打包100个
解决：缓存

babel缓存：

开启后，将第一次打包的结果缓存起来，检测与转换，开启babel缓存更有利于处理JS文件

{test: /\.jsx?$/,exclude: /node_modules/,use: [{loader: 'babel-loader',options: {cacheDirectory: true //开启babel缓存}}]
},

文件资源缓存：

问题：后台服务器会给文件做强缓存，不加hash，用户使用的是强缓存，更新不了文件

解决：给文件名加hash，浏览器会帮更新文件，因为名字改变了

1.加hash：每次webpack构建时会生成一个唯一的hash值
[name]_[hash:8].js
问题：js和css同时使用一个hash值，如果只更改了其中一个文件，
会使另外一个文件缓存失效，导致不必要的更新2.加chunkhash：多个文件的统一出口文件
[name]_[chunkhash:8].js
问题：js和css同时使用一个hash值，因为css是在jS中引入的，属于同一个chunk3.加cententhash：cententhash会根据文件内容的变化而改变hash，不同的内容会生成不同的hash
[name]_[cententhash:8].js

注意：webpack 5.x：hash已经废弃

多进程打包

多进程打包，适应范围：大工程才使用

注意：开启进程需要600毫秒

yarn add -D thread-loadermodule = {rules:[{test:'/\.jsx?/',exclude: /node_modules/,use:[{loader:'thread-loader',options:{workers:2 //使用2个进程打包  }}，{loader:'babel-loader',options:{...}}]  }]
}

生产环境性能优化

代码压缩

压缩代码，缩小文件体积

html代码压缩

yarn add -D html-webpack-pluginconst HtmlWebpackPlugin = require('html-webpack-plugin');plugins: [new HtmlWebpackPlugin({template: './index.html',  title: '代码研习',          minify: {                  //html代码压缩collapseWhitespace: true,  //移除空格removeComments: true       //移除注释}})
]

css代码压缩

yarn add -D css-minimizer-webpack-pluginconst CssMinimizer= require('css-minimizer-webpack-plugin')
plugins: [ new CssMinimizer() ]

js文件代码压缩

production模式自动压缩

tree-shaking摇树

摇树，把不健康的叶子摇下来

意思是：把没有使用到的文件删除，去除无效的代码，减小文件体积

使用前提： 使用ES6模块化（import），开启production模式

optimization:{usedExports:true  //开启，只要是导出的目录都摇树
}在package.json配置：
{"sideEffects":false, // 去js文件中寻找导出的变量是否引用，false是所有模块都监控，可能会删除CSS文件"sideEffects":["*.css"，"*.less"] //所有的CSS都不需要监控.
}

code-splitting代码分割

作用：代码分割/打包分割，如：把一个2M的文件，拆分成2个1M的文件，分别引入加载

解决问题：文件体积大，重复引入文件，加载时间长

分割方式：

第一种方式：多入口文件，每个入口都会打包成一个chunk
第二种方式：webpack内置的打包分割
第三种方式：通过JS代码，让某个文件单独打包成一个chunk

第一种方式： 多入口文件，每个入口都会打包成一个chunk

entry: {main: './src/index.js',test: './src/test.js'
},
output: {path: resolve(__dirname, '../dist'),filename: 'js/[name].[contenthash:8].js',
},

第二种方式：webpack内置的打包分割

可以将 node_modules 中引用的代码单独打包成一个chunk最终输出

webpack会自动分析多入口chunk中，有没有公共的依赖，如果有会打包成单独一个chunk

optimization:{splitChunks: {chunks: 'all',  //默认支持异步async，all对所有的模块有效//详细配置minSize:30 * 1024 //当模块大于30KB时才分割minChunks:1,    //模块引用的次数，只要1次就分割出来maxAsyncRequests:5, //模块数，超过5个就不分割了maxInitialRequests:3, //入口文件不同请求3次automaticNameDelimiter:'~', //名称连接符name:true,  //可以使用命名规则cacheGroups:{ //缓存组，判断哪些模型需要进行分割vendors:{ //是通过node_modules引用进来的name:'vendors'//chunk名称(多入口的配置)test:/[\\/]node_modules[\\/]/,priority:5 //优先级，数字越大，优先级越高},common:{  //公共模块name:'common',mixChunks:2,priority:0,reuseExistingChunk:true}}},
}

简单例子

单独打包dayjs

import React from 'react'
import dayjs from 'dayjs'export const App = () => {return (<div><h3>App</h3><h3>{dayjs(Date.now()).format('YYYY-MM-DD')}</h3></div>)
}//webpack配置
optimization: {runtimeChunk: 'single',splitChunks: {  //代码分割chunks: 'all',}
}//打包结果
//962.78b1a132.js 就是dayjs打包的chunkasset js/962.78b1a132.js 163 KiB [emitted] [immutable] [minimized] (id hint: vendors) 1 related assetasset js/runtime.0aed458b.js 1.75 KiB [emitted] [immutable] [minimized] (name: runtime)asset js/main.9badeae3.js 1.3 KiB [emitted] [immutable] [minimized] (name: main)asset js/test.d725219e.js 148 bytes [emitted] [immutable] [minimized] (name: test)

第三种方式：通过JS代码，让某个文件单独打包成一个chunk

import动态导入，也会让文件被单独打包成一个chunk

//sayhi.js
export const sayHi = (value) => console.log(value)//App.js
/*webpackChunkName:'sayhhh'*/  是给chunk重命名，默认是文件名
import(/*webpackChunkName:'sayhhh'*/'./sayhi').then((res) => {res.sayHi('hello')
})//打包结果
asset js/sayhhh.a7ff02f1.js 198 bytes [emitted] [immutable] [minimized] (name: sayhhh)
asset js/main.a79942e4.js 1.37 KiB [emitted] [immutable] [minimized] (name: main)

lazy loading懒加载/预加载

异步加载/懒加载，会自动代码分割

react简单例子：点击按钮之后，加载lazyLoad中的函数

//lazyLoad.js
export const lazy = () => console.log('lazy')//home.jsx
export const Home = () => {const handelLazyLoad = () => {import('./lazyLoad').then(res => {res.lazy()})}return (<div><button onClick={() => handelLazyLoad()}>懒加载</button></div>)
}//打包结果：
asset js/src_lazyLoad_js.16c9cfe1.js 2.07 KiB [emitted] [immutable] 1 related asset

externals忽略打包

环境： 生产环境
场景： 有些库使用cnd引入，需要忽略打包，这样打包的体积更小
注意： 需要html中手动引入被忽略的包

例子：
dayjs 希望通过 cdn引入

import React from 'react'
import dayjs from 'dayjs'export const App = () => {return (<div><h3>App</h3><h3>{dayjs(Date.now()).format('YYYY-MM-DD')}</h3></div>)
}//webpack
module.export = {externals: {dayjs: 'dayjs'   //忽略的包名}
}//html<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>

这样dayjs就没有被打包了，如何验证？把html中的cdn链接注释，就会报错找不到dayjs，证明使用的是cdn连接

dll动态链接库

将多个库打包成一个chunk

第一步：新建一个打包库的文件

const { resolve } = require('path')
const Webpack = require('webpack')module.exports = {mode: 'production',entry: {vendor: ['dayjs'] //需要打包的库，放到数组中},output: {path: resolve(__dirname, '../dll'),filename: '[name].dll.js',library: '[name]_library' //打包的库里向外暴露出去的内容叫什么名字},plugins: [new Webpack.DllPlugin({name: '[name]_library', //隐射库的暴露内容名称path: resolve(__dirname, '../dll/manifest.json')//输出文件路径})]
}

第二步：执行该文件

执行成功后，在dll目录生成两个文件：manifest.json，vendor.dll.js（名字是根据第一步的配置生成）

yarn dll"scripts": {"dll": "webpack  --config ./build/webpack.dll.js"
},

第三步：忽略打包文件和使用文件

manifest.json的作用是：告诉webpack，哪些文件忽略打包
vendor.dll.js的作用是：使用时引入

const { resolve } = require('path')
const Webpack = require('webpack')
const AddAssetHtml = require('add-asset-html-webpack-plugin') 这个库的作用是把dll的文件引入html中const proConfig = {mode: 'production',plugins: [new Webpack.DllReferencePlugin({  //告诉webpack哪些库不参与打包，同时使用时的名称也得该manifest: resolve(__dirname, '../dll/manifest.json')}),new AddAssetHtml({filepath: resolve(__dirname, '../dll/vendor.dll.js')})],
};module.exports = proConfig//打包结果
asset vendor.dll.js 6.4 KiB [emitted] [minimized]

总结：

学习更多

webpack学习导图