开发环境性能优化 概念:「HMR:」 hot module replacement 热模块替换 / 模块热替换 作用:一个模块发生变化,只会重新打包这一个模块,而不是打包所有模块,极大的提升了构建速度 source-map 概念:一种提供源代码构建后代码映射技术(如果构建后代码出错了,可以通过映射追踪到源代码错误) 生产环境性能优化 oneOf:避免了每一个文件都要被 loader 过一次 注:不能有两个配置处理同一种类型文件 cache(缓存) tree shaking:去除无用的代码 前提:1. 必须使用 ES6 模块化;2. 开启 production 环境作用:减少代码体积在 package.json 中配置: 2.optimization: 3.「某个文件的单独打包」 懒加载 和 预加载 懒加载:当文件需要时才加载 预加载 prefetch:会在使用前,提前加载 js 文件。等其他资源加载完毕,浏览器空闲了,在偷偷加载资源 正常加载可以认为是并行加载(同一时间加载多个文件) PWA PWA:渐进式网络开发应用程序(离线可访问) 插件:workbox --> npm i workbox-webpack-plugin -D 注册 serviceworker,并处理兼容性问题 1.eslint 不认识 window、navigator 等全局变量 2.sw 代码必须运行在服务器上 多进程打包 插件:npm i thread-loader -D进程启动大概为 600ms,进程通信也有开销。只有工作消耗品时间比较长,才需要多进程打包。 externals 1.设置拒绝打包的库 在入口 index.html 引入 CDN dll 对代码进行单独打包,(第三方库:jQuery,react,vue ...),第二次以后打包时不再打包第三方库。webpack.dll.js 文件:注:运行 webpack 时,默认查找 webpack.config.js,需要运行 webpack.dll.js 文件时,可以通过运行 webpack --config webpack.dll.js实现运行HMR
解决:修改 「entry」 入口,将 html 文件引入module.exports = {
// 引入html,解决热更新的问题
entry: ['./src/js/index.js', './src/index.html'],
devServer: {
// 开启 HMR 功能
// 当修改了 webpack 配置,新配置要想生效,必须重启服务
hot: true
}
}
(vue 和 react 脚手架中默认使用:eval-source-map)
eval-cheap-source-map、
eval-source-map、
source-map、
cheap-module-source-map、
cheap-source-map
内联会让代码体积变大,所以在生产环境中只会只用 「外部 source-map」
nosources-source-map、
hidden-source-mapmodule.exports = {
mode: 'development', // 'production'
devtool: 'eval-source-map' // 'source-map'
}
oneOf
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
//优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只会匹配一个
oneOf: [
...,
{},
{}
]
}
]
}
}
让第二次打包构建速度更快module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
// 开启 babel 缓存
// 第二次构建时,会读取之前的缓存
cacheDirectory: true
}
}
]
}
}
让代码上线运行缓存更好使用
问题:因为 js 和 css 是同时使用一个 hash 值(如果重新打包会导致所有文件缓存都失效)
问题:js 和 css 的 hash 值还是一样的
因为 css 是在 js 文件中被引入的,所以同属于一个 chunktree shaking(摇树)
问题:可能会把 css / @babel/polyfill (副作用)文件干掉code split(代码分割)
module.exports = {
entry: {
// 多入口
main: './src/js/index.js',
test: './src/js/test.js'
},
output: {
// [name]: 取文件名
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
mode: 'production'
}
module.exports = {
entry: './src/js/index.js',,
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build')
},
// 可以将 node_modules 中的代码单独打包一个chunk最终输出
optimization: {
splitChunks: {
chunks: 'all'
}
}
mode: 'production'
}
// import动态导入语法:能将某个文件单独打包成一个 chunk
// 此处的注释可以命名打包后文件名
import(/* webpackChunkName: 'test' */ './test.js')
.then(() => {})
.catch(() => {})
// import动态导入语法:能将某个文件单独打包成一个 chunk
// webpackChunkName 此处的注释可以命名打包后文件名,webpackPrefetch 预加载
import(/* webpackChunkName: 'test', webpackPrefetch: true */ './test.js')
.then(() => {})
.catch(() => {})
module.exports = {
plugins: [
new WorkboxWebpackPlugin.GenerateSW({
// 1. 帮助 serviceworker 快速启动
// 2. 删除旧的 serviceworker
// 生成一个 serviceworker 配置文件
clientsClaim: true,
skipWaiting: true
})
]
}
解决:需要修改 package.json 中 eslintConfig 配置"env": {
"browser": true
}
// 注册 serviceworker,并处理兼容性问题
if ('serviceworker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceworker
.register('/service-worker.js')
.then(() => {
console.log('sw注册成功了')
})
.catch(() => {
console.log('sw注册失败了')
})
})
}
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
// 开启多进程打包
'thread-loader',
{
loader: 'babel-loader',
options: {
presets: []
}
}
]
}
]
}
}
module.exports = {
externals: {
// 忽略库名 --> npm包名
jquery: 'jQuery'
}
}
<script src="xxx"></script>
const { resolve } = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
// 最终打包生成的[name] --> jquery
// ['jquery'] --> 要打包的库是 jquery
jquery: ['jquery']
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash]' // 打包的库里面向外暴露的内容的名字
},
plugins: [
// 打包生成一个 manifest.json --> 提供和 jQuery 映射
new webpack.DllPlugin({
name: '[name]_[hash]', // 映射库的暴露的内容名称
path: resolve(__dirname, 'dll/manifest.json')
})
],
mode: 'produciton'
}
const { resolve } = require('path')
const webpack = require('webpack')
module.exports = {
plugins: [
// 告诉webpack哪些库不参与打包,同时使用名称改变
new webpack.DllReferencePlugin({
path: resolve(__dirname, 'dll/manifest.json')
}),
// 将某个文件打包输出,并在html中自动引入
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})
],
mode: 'produciton'
}