webpack5(高级)

时间:2022-10-06 22:54:24

主要讲解如何进行webpack优化(why,what,how)。从以下几点优化角度来介绍:

  • 提升开发体验
  • 提升打包构建速度
  • 减少代码体积
  • 优化代码运行性能

一、提升开发体验

1. sourceMap

作用:为解决构建后代码出错位置难定位的问题。它会生成一个.map文件,里面包含源代码和构建后代码的映射关系,帮助定位原文件中对应位置。

用法:在配置文件中新增一个配置

..
..
loader
pligins
mode
devtool:"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、等处理,开启多进程。

使用:

  1. 获取cpu数量:
    const threads = require("os").cpus(  ).length
  2. babel-loader中:
    use:[ //当使用多个loader时,就用rules:[]
        {
            loader:"thread-loader",//开启多进程
            options:{
                works:threads,//进程数
            }
        },
        {
            loader:"babel-loader",
            ...
        }
    ]
  3. eslint中:
    new ESLintPlugin({
        ...
        threads:threads,
    })
  4. 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

webpack5(高级)

 四、优化代码运行性能

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",//对所有模块都进行分割
        ... //下面是一些默认配置粘在下面的图里
    }
}

webpack5(高级)

 修改配置:

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中:

webpack5(高级)

 main.js中:

webpack5(高级)

 有可能因为路径问题导致加载失败,需要用serve这个包部署静态资源服务器。