webpack性能优化
开发环境性能优化：1.优化打包构建速度 2.优化代码调试
生产环境性能优化：1.优化打包构建速度 2.优化代码运行的性能
一、HMR
HMR: hot module replacement 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）,极大提升构建速度 样式文件：可以使用HMR功能，因为style-loader内部实现了 js文件：默认不能使用HMR功能 -->需要修改js代码，添加支持HMR的代码 注意：HMR功能对js的处理，只能处理非入口js文件 html文件：默认不能使用HMR功能，同时会导致问题，html不能热更新了～ 解决：修改 entry入口
热模块替换的原理： WDS不刷新浏览器，WDS不输出文件，而是放在内存中，使用HotModuleReplacementPlugin插件 webpack Compile (webpack编译器):讲js编译成bundle（最后打包好输出的文件） HMR Server :将热更新的文件输出给 HMR Runtime bundle server:提供文件在浏览器的访问 HMR Runtime:被注入到浏览器，更新文件的变化。
样式文件配置修改：
devServer: {
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
// 开启HMR功能
// 当修改了webpack配置，新配置要想生效，一定要重新启动webpack服务
hot: true,
},
js文件修改：在入口index.js文件中添加如下代码
if (module.hot) {
// 一旦module.hot 为true，说明开启了HMR功能， --》让HMR功能代码生效
module.hot.accept('./print.js', function () {
// 方法监听print文件的变化，一旦发生变化，其他模块不会重新打包构建
// 会执行后面的回掉函数
print();
})
}
html 文件修改入口文件，修改为：
entry: ['./src/js/index.js', './src/index.html'],
二：source-map ：是一种提供源代码到构建代码的映射技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
差异说明：
source-map ：是一种提供源代码到构建代码的映射技术 （如果构建后代码出错了，通过映射可以追踪源代码错误，）
[inline-|hidden-eval-][nosources-][cheap-[module-]] 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:外部
内联 和外部的区别：1.外部生成联文件，内联没有 2.内联构建速度更快
module会将loader和source-map 加入
开发环境：速度快，调试更友好
速度快（eval>inline>cheap>.....）
eval-cheap-source-map
eval-source-map
调试更友好
source-map
cheap-module-source-map
cheap-source-map
---> eval-source-map / cheap-module-source-map
生成环境：源代码要不要隐藏？调试要不要更友好
内联会让代码体积变大，所以在生产环境不用内联
nosources-source-map //全部隐藏
hidden-source-map // 只隐藏源代码，会提示构建后代码错误
--> source-map / cheap-module-source-map
在webpack.config.js文件中这样修改
devtool: 'source-map',
三：生产环境的优化 oneOf
以下loader只会匹配一个 注意：不能有俩个配置处理同一个类型文件
module: {
rules: [
// 详细loader配置
{
// 语法检查：eslint-loader eslint
// 注意：只检查自己写的源代码，第三方的库不用检查的
// 设置检查规则
"eslintConfig": {
"extends": "airbnb-base
}
// package.json 中eslintConfig中设置～
// airbnb --> eslint-config-airbnb-base eslint eslint-plugin-import
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
// 自动修复
fix: true,
},
},
{
//以下loader只会匹配一个
// 注意：不能有俩个配置处理同一个类型文件
oneOf: [
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签，将js中样式资源插入进行，添加到head中生效
// 'style-loader',
// loader 取代 style-loader 。作用：提取css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader',
// css 兼容性处理：postcss--> postcss-loader postcss-preset-env
// 对浏览器兼容处理
// "browserslist": {
// 开发环境 --> 设置node环境变量： process.env.NODE_ENV = developement
// "development": [
// "last 1 chrome version",
// "last 1 firefox version",
// "last 1 safari version"
// ],
// 生产环境
// "production": [
// ">0.2%",
// "not dead",
// "not op_minni all"
// ]
// }
// 使用loader的默认配置
// post-loader
// 修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
// postcss的插件
require('postcss-preset-env')();
},
},
},
],
}, {
test: /\.less$/,
// 使用哪些loader进行处理
// 使用多个loader处理 用use
use: [
// 创建style标签，将js中样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader',
// 将less文件编译成css文件
// 需要下载less 和less-loaders
'less-loader',
],
}, {
// 打包其他资源
// 排除 css js html 资源
exclude: /\.(css|less|js|html｜jpg｜png｜gif)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
// 打包输出文件夹目录
outputPath: 'media',
},
}, {
// 问题：默认处理不了html 中的img图片
test: /\.(jpg|png|gif|jpeg)$/,
// 需要下载url-loader 和 file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理，
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
esModule: false,
// 给图片进行重新命名
// [hash:10] 取哈希值的前十位
// [ext] 取文件原来的扩展名
name: '[hash:10].[ext]',
outputPath: 'imgs',
},
}, {
test: /\.html$/,
// 处理html 文件的img图片（负责引入img，从而能被url-loaderurl-loader进行处理）
loader: 'html-loader',
},
{
/* js兼容性处理：babel-loader @babel/core @babel/preset-env @babel/polyfill
1.基本js兼容性处理--> @babel/preset-env
问题：只能转换基本语法，如promise高级语法不能转换
2.全部js兼容性处理--> @babel/polyfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了～
3.需要做兼容性处理的就做：按需加载--> core-js
*/
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
//指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
],
}
}
]
}
],
},
四-生产环境 缓存
1.开启babel缓存
第2次构建时，会读取之前的缓存
cacheDirectory: true
2.文件资源缓存
hash：每次webpack构建时会生成一个唯一的hash值
问题：因为js和css同时使用一个hash值。
如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
chunkhash:根据chunk生成的hash值，如果打包来源于同一个chunk，那么hash值就一样
问题：因为js和css同时使用一个hash值。
因为css是在js中被引入的，所以同属于一个chunk
contenthash ：根据文件的内容生成hash值，不同文件hash值一定不一样
让代码对上线代码进行优化
output: {
filename: 'js/build.[hash:10].js',
path: resolve(__dirname, 'build')
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/build.[hash:10].css',
}),
// css 压缩
new optimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件 并自动引入打包输出的所有资源（js/css）
template: './src/index.html',
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true,
}),
],
服务器代码：
/**
* 服务器代码
* 启动服务器指令：
* npm i nodemon -g
* nodemon server.js
*
* node server.js
*/
const express = require('express');
const app = express();
app.use(express.static('build', { maxAge: 1000 * 3600 }));
app.listen(3000);
五 tree shaking:去除无用代码
前提：1.必须使用es6模块化 2.开启production环境 作用：减少代码体积
在package.json 中配置
"sideEffects":false 所有代码都没有副作用（都可以进行tree shaking）
问题：可能会把css/@babel/polyfill（副作用）文件干掉
"sideEffects":["*.css",".less"]
六、代码分割
// 1.可以将node_modules 中代码单独打包一个chunk最终输出
// 2.自动分析多入口chunk中，有没有公共的文件，如果有就会打包成单独一个chunk
optimization:{
splitChunks:{
chunks:'all'
}
},
七、懒加载/预加载
在index.js文件中
//懒加载～：当文件需要使用时才加载～
//预加载prefetch:会在使用之前，提前加载js文件
//正常加载可以认为是并行加载（同一时间加载多个文件）
// 预加载 prefetch：等其他资源加载都完毕，浏览器空闲了再偷偷加载资源
import (/* webpackChunkName:'test',webpackPrefetch:true * './test'/).then(({
mul
})=>{
console.log(mul(4,5))
})
八、PWA
PWA：渐进式网络开发应用程序（离线可访问）
安装 workbox --> workbox-webpack-plugin
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
new WorkboxWebpackPlugin.GenerateSW({
/* 1.帮助serviceworker 快速启动
2.删除旧的serviceworker
生成一个serviceworker 的配置文件
*/
clientsClaim:true,
skipWaiting:true
})
在webpack.json中配置
eslint 不认识window nabigator 全局变量
解决：需要修改package.json中eslintConfig配置
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true // 支持浏览器端全局变量
}
在入口文件index.js中
注册serviceworker
处理兼容性问题
if ('serviceworker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then(() => {
console.log("sw注册成功了")
})
.catch()
})
}
九、多进程打包
开启多进程打包，进程启动大概为600ms，进程通信也有开销。
只有工作消耗时间比较长，才需要多进程打包
{
test: /\.js$/,
exclude: /\.node_modules/,
use: [
{
loader: 'thread-loader',
options: {
workers: 2 //进程2个
}
}, {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
// 开启babel缓存
// 第2次构建时，会读取之前的缓存
// 文件资源缓存
// hash：每次webpack构建时会生成一个唯一的hash值
// 问题：因为js和css同时使用一个hash值。
// 如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
// chunkhash:根据chunk生成的hash值，如果打包来源于同一个chunk，那么hash值就一样
// 问题：因为js和css同时使用一个hash值。
// 因为css是在js中被引入的，所以同属于一个chunk
// contenthash ：根据文件的内容生成hash值，不同文件hash值一定不一样
// 让代码对上线代码进行优化
cacheDirectory: true
}
}
十、externals
externals：{
// 拒绝jquery被打包进来
jquery :'jQuery'
}
十一、使用dll技术，对某些库（第3方库：jquery、react 、vue 。。。）进行单独打包
新建webpack.dll.js文件
const { resolve } = require("core-js/fn/promise");
const { resolve } = require('path');
const webpack = require('webpack');
/*
当你运行webpack时，默认查找webpack.config.js 配置文件
需求：运行webpack.dll.js 文件
--> webpack --config webpack.dll.js
*/
module.exports = {
entry: {
// 最终打包生成的[name]-->jquery
// ['jquery']-->要打包的库是jquery
jquery: ['jquery']
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash]', //打包的库里面向外暴露出去的内容叫什么
},
plugins: [
// 打包生成一个mainfest.json -->提供jquery的映射
new webpack.DllPlugin({
name: '[name]_[hash]',// 映射库的暴露内容名称
path:resolve(__dirname,'dll/mainfest.json') //输出文件路径
})
],
module:'production'
}
在webpack.config.js 中修改plugins
//告诉webpack哪些库不参与打包，同时使用时的名称也变
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/mainfest.json');
})
//将某个文件打包输出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filename:resolve(__dirname,'dll/jquery.js')
})
