webpack5(高级)

Posted 2022-10-07 七彩冰淇淋与藕汤

主要讲解如何进行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

 四、优化代码运行性能

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这个包部署静态资源服务器。