webpack5 --- 7 性能优化

性能优化分为开发环境和生产环境

开发环境

• 提高环境打包速度
• 优化代码调试

生产环境

• 提高打包速度
• 优化代码运行的性能

模块热替换 HMR

作用：一个模块发生变化，智慧重新打包这一个模块，这样提高构建速度

• 样式文件： 可以使用HMR功能，因为style-loader内部实现了 miniCssExtractPlugin.loader也没问题
• js 文件： 默认不使用 HMR功能-----》 需要修改js 代码，添加支持HMR功能的代码

注意： HMR功能对JS 的处理，智能处理非入口JS文件的其他文件

• html文件 默认不使用HMR功能， 如果要使用，通过修改入口将html 文件引入 来实现

修改： 在devServer 配置中添加 hot: true

优化代码调试,使用source-map

在webpack.config.js 中添加 devtool: "eval-source-map**"

• inline-source-map 内联 只生成一个source-map 能不生成错误的原因，并且提供源代码位置
• hide-source-map 外部 能够提示错误原因，不能提供追踪源代码位置
• eval-source-map 内联 每个js 后面都会生成 能不生成错误的原因，并且提供源代码位置， 会生成一个hash 值
• nosources-source-map 外部 能找到错误代码的准确信息，不能提供源代码信息
• cheap-source-map 外部 能够提示错误信息，只能精确到错误行
• cheap-moudle-source-map 外部 能够提供错误的准确信息 能够准确到行和列
• source-map 外部 能够提供错误的准确信息 能够准确到行和列

module会将loader的source map 加入

cheap会精确到行 module会精确到列

开发环境： 速度快， 调试更友好

速度快（eval>iinline>cheap>...）后面的更快

eval-cheap-source-map

eval-source-map

调试更友好

source-map

cheap-module-source-map

cheap-source-map

开发环境： 最优的 eval-source-map

生产环境：要使用外部的方式 source-map

nosources-source-map 全部隐藏

hidden-source-map 只隐藏源代码，会提示构建后的代码

优化生产环境打包速度

oneOf

module: {
    rules: [
        {
            // 放loader
        },
        // 以下loader 只会匹配一个loader, 所以不能有两个配置处理相同的文件
        {
            oneOf: [
                // 放loader
            ]
        }
    ]
}

使用缓存提高访问速度

1. babel缓存

   cacheDirectory: true 可以提高使用babel 缓存来提高 打包速度

   {
           test: /.js$/,
           exclude: /node_modules/,
           use: [
             {
               // 指定加载器
               loader: 'babel-loader',
               // 设置预定义的环境
               options: {
                 // 指定环境的插件
                 presets: [
                   [
                     '@babel/preset-env',
                     // 配置信息
                     {
                       // 要兼容的浏览器
                       targets: {
                         'chrome': '88',
                         //"ie": '11'
                       },
                       // 指定下载的 corejs 版本
                       "corejs": '3',
                       // 使用corejs 的方式 usage 表示按需加载
                       "useBuiltIns": "usage"
                     }
                   ]
                 ],
                 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: '[name][contenthash:10].js',
       path: resolve(__dirname, 'build')
     },
     new miniCssExtractPlugin({
         filename: "css/[name][contenthash:10].css"
       }),
   

tree shaking 去除无用代码

前提 ：

1. 必须使用es6 模块
2. production 环境下 在package.json 文件中

“sideEffects”:['*.css','*.less'] //因为css 等代码是引用但是没有使用的代码， 所以会被过滤掉，在这里添加上 选项， 对这些代码 不进行摇树