主要讲解如何进行webpack优化(why,what,how)。从以下几点优化角度来介绍:
- 提升开发体验
- 提升打包构建速度
- 减少代码体积
- 优化代码运行性能
一、提升开发体验
1. sourceMap
作用:为解决构建后代码出错位置难定位的问题。它会生成一个.map文件,里面包含源代码和构建后代码的映射关系,帮助定位原文件中对应位置。
用法:在配置文件中新增一个配置
....loaderpliginsmodedevtool:"cheap-module-source-map",//生产环境用"source-map"
cheap-module-source-map:只有行的映射关系
source-map:有行、列的映射
二、提升打包速度
1.HotModuleReplacement(只有开发模式使用)
作用:开发时只改变某个文件而要重新打包,却需要将所有模块全部重新打包,速度慢。HMR可以实现在程序运行中增删改模块,而无需重新加载整个页面。(webpack5中是默认配置,在devServer中,hot:false可以关闭HMR)
注:js不会默认开启HMR,需要手动配置。在vue或react项目中,有相应loader可以帮助js开启HMR
2.OneOf
只用一个loader处理文件,而不需要每个loader都看一遍
3.include/exclude
只能用一个,常用于处理js文件时(babel、eslint),排除对node_modules的处理和检查。
relus:[ test:/\.js/, include:path.resolve(__dirname,"../src"),只处理src下的文件 //exclude:/node_mudules/,排除node_modules loader:"babel-loader",]
4、打包缓存
作用:第二次及以后的打包时,不用打包所有,只对修改的文件进行重新打包。(babel、eslint)
用法:
babel在options中开启缓存:
options:{ cacheDirectory:true,//开启babel缓存 cacheCompression:false,//关闭缓存文件压缩}
eslint在新建ESLintPlugin时,传参数(已经默认开启缓存):
new ESLintPlugin({ cache:true,})
5.多进程打包
作用:对js文件的babel、eslint、等处理,开启多进程。
使用:
- 获取cpu数量:
const threads = require("os").cpus( ).length
- babel-loader中:
use:[ //当使用多个loader时,就用rules:[] { loader:"thread-loader",//开启多进程 options:{ works:threads,//进程数 } }, { loader:"babel-loader", ... }]
- eslint中:
new ESLintPlugin({ ... threads:threads,})
- terser中:
optimization:{ new CssMinimizerPlugin(),//css压缩,webpack5以后习惯放在optimization配置中了 new TerserWebpackPlugin({ //js压缩,一般只在生产模式使用 parallel:threads, }),}
三、减少代码体积
1.Tree Shaking
作用:移除js中没有使用到的代码。依赖ES模块化,默认已开启。
2.@babel/plugin-transform-runtime
作用:babel为编译的每个文件都插入了辅助代码,是代码体积过大,使用以上插件可以将辅助代码作为一个独立模块避免重复引入。
使用:安装插件后,在使用babel-loader是,将其添加到options中:
{ loader:"babel-loader", options:{ ... plugins:["@babel/plugin-tranform-runtime"], }}
3.压缩本地图片(非链接引入):image-minimazer-webpack-plugin
作用:压缩本地图片
使用:
首先下载两个包:image-minimizer-webpack-plugin、imagemin
无损压缩再需要下载:imagemin-gifsicle、imagemin-jpegtran、imagemin-optipng、imagemin-svgo
有损压缩再需要下载:imagemin-gifsicle、imagemin-mozjpeg、imagemin-pngquant、imagemin-svgo
四、优化代码运行性能
1.Code Split、懒加载
作用:为了在后续使用预加载懒加载等技术,所以不能将所有js文件打包到一个文件中,而需要将代码进行分割。实现按需加载,这样请求数量少,速度更快。
使用1:多入口entry
module.exports = { entry:{ app:"./src/app.js", main:"./src/main.js", }, output:{ path:path.resolve(__dirname,"dist"), filename:"[name].js",//webpack,命名方式,[name]以文件名自己命名 }}
使用2: 复用 splitChunks。当多个入口对应的模块有公共代码,想要把这些公共代码提取成一个单独的,使用时再引入。
optimization:{ splitChunks:{ chunks:"all",//对所有模块都进行分割 ... //下面是一些默认配置粘在下面的图里 }}
修改配置:
cacheGroups:{ ... default:{ minSize:0,//打包文件的最小体积 minChunk:2,//被引用两次以上就单独打包 priority:-20, reuseExistingChunk:true, }}
使用3:按需加载
例如vue中的组件按需加载import,在组件展示时才去加载。如果使用了import,webpack会自动将动态导入的文件代码拆分成单独的模块,在使用时才自动加载。
打包输出的文件名是随机数命名,不方便后续追踪,如何给文件取名?1)在文件导入时给文件命名 import(/*webpackChunkName: “mychunkname” */ “./js/mychunk”)2)在output中添加配置项:chunkFilename:”static/js/[name].js”
2.preload、prefetch 预加载
作用:在文件还没使用的时候,且浏览器空闲,将这些文件加载回来。
preload:立即加载,优先级高,只能加载当前页面需要使用的资源,兼容性更好
prefetch:空闲时加载,优先级低,可以加载当前页面和下一页面所用资源,兼容性差
使用:安装@vue/preload-webpack-plugin、引入、使用
import preloadWebpackPlugin from "@vue/preload-webpack-plugin"export default{ plugins:[ new preloadWebpackPlugin({ rel:"preload", as:"script", //rel:"prefetch" //不需要as }) ]}
注:一般在加载当前页且优先级较高时用preload,加载其他页资源时用prefetch.
3.network cache
作用:当一个文件内容改变,这个文件的hash名也变化,那么依赖这个文件的其他文件由于使用了这个文件名,导致其他文件内容也改变了,所以其他文件的hash也变了,缓存就失效了。对于缓存不友好。为解决以上问题,在optimization中配置runtimeChunk,从而生成一个runtime文件,类似于映射文件,能保证依赖文件hash不变。
使用:
optimization:{ runtimeChunk:{ name:(entrypoint)=>`runtime~${entrypoint.name}.js`, }}
4.core-js
作用:es6以上API无法用babel做处理,例如promise、数组的一些高级语法等。core-js是专门用来做polyfill(补丁)的。就是用社区上提供的一段代码,让我们在低版本浏览器上使用高级语法。
使用1:安装core-js,并将core-js全部引入。
import 'core-js'
使用2:按需加载
import 'core-js/es/promise'
使用3:自动引入 (在babel.config.js中进行配置)
module.exports = { presets:[ [ "@babel/preset-env", { useBuiltIns: "usege",//按需引入 corejs:3, } ] ]}
5.离线缓存PWA
作用:web端的离线缓存。插件叫做 workbox-webpack-plugin。兼容性差
使用:
plugins中:
main.js中:
有可能因为路径问题导致加载失败,需要用serve这个包部署静态资源服务器。