webpack优化配置

太过爱你忘了你带给我的痛 2022-12-27 02:26 143阅读 0赞

### 文章目录 ###

*   *  一、webpack性能优化介绍
     *   *   *  1. 开发环境性能优化
             *  2. 生产环境性能优化
     *  二、HMR
     *   *   *  1、为什么要用 HMR
             *  2、什么是 HMR
             *  3、HMR的使用
     *  三、source-map
     *   *   *  1、什么是 source-map
             *  2、source-map分类
             *  3、内联 和 外部的区别
             *  4、如何选择
             *   *  （1）开发环境：需要速度快，调试更友好
                 *  （2）生产环境：源代码要不要隐藏? 调试要不要更友好？
     *  四、oneOf
     *  五、缓存
     *   *   *  1、babel缓存
             *  2、文件资源缓存
             *   *  （1）hash：每次wepack构建时会生成一个唯一的hash值
                 *  （2）chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
                 *  （3）contenthash：根据文件的内容生成hash值。不同文件hash值一定不一样
     *  六、tree shaking：去除无用代码
     *  七、code split：代码分割
     *   *   *  1、方式一：
             *  2、方式二：
             *  3、方式三：
     *  八、lazy loading：懒加载
     *   *   *  1、\*\*懒加载：当文件需要使用时才加载\*\*
             *  2、prefetch 预加载：会在使用之前，提前加载js文件
     *  九、pwa： 渐进式网络开发应用程序（离线可访问）
     *   *   *  1、先配置使用 workbox-webpack-plugin 插件，生成一个 serviceWorker 配置文件
             *  2、在入口文件 index.js 中注册 serviceWorker
             *  3、webpack 打包
             *  4、安装 serve 并运行
             *  5、打开浏览器
     *  十、多进程打包
     *  十一、external
     *  十二、dll：动态链接库

## 一、webpack性能优化介绍 ##

#### 1. 开发环境性能优化 ####

*  优化打包构建速度
    
     *  HMR
 *  优化代码调试
    
     *  source-map

#### 2. 生产环境性能优化 ####

*  优化打包构建速度
    
     *  oneOf
     *  babel缓存
     *  多进程打包
     *  externals
     *  dll
 *  优化代码运行的性能
    
     *  缓存(hash-chunkhash-contenthash)
     *  tree shaking
     *  code split
     *  懒加载/预加载
     *  pwa

## 二、HMR ##

#### 1、为什么要用 HMR ####

当修改样式文件的时候，明明 js 文件没有什么变化，但是 js 文件会被重新加载，所以打包的时候，看似我们只修改了样式文件，实际上是它也把 js 文件重新打包了一次。同理，如果我有一万个模块，我只修改了其中一个，但这一万个都要重新打包，速度会更加的慢。这时我们可以用 HMR 。

#### 2、什么是 HMR ####

*  HMR：hot module replacement 热模块替换 / 模块热替换
 *  作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） ，极大提升构建速度

#### 3、HMR的使用 ####

*  **样式文件：可以使用HMR功能，因为style-loader内部实现了~**

// 开启HMR功能
    // 当修改了webpack配置，新配置要想生效，必须重新webpack服务
    hot: true

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

*  js文件：默认不能使用HMR功能 。需要修改js代码，添加支持HMR功能的代码
    
     *  注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。

if (module.hot) { 
      // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
      module.hot.accept('./print.js', function() { 
        // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
        // 会执行后面的回调函数
        print();
      });
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

*  html文件：默认不能使用HMR功能，同时会导致问题—> html文件不能重新编译打包更新了~ （不用做HMR功能）
    
     *  解决：修改entry入口，将html文件引入

entry: ['./src/js/index.js', './src/index.html'],

![在这里插入图片描述][20201208075052860.png]  
**注意，如果修改了webpack配置，发现不生效，必须重新运行webpack服务。**

## 三、source-map ##

#### 1、什么是 source-map ####

*  source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）

#### 2、source-map分类 ####

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

*  source-map：外部  
    错误代码准确信息 和 源代码的错误位置
 *  inline-source-map：内联  
    只生成一个内联source-map  
    错误代码准确信息 和 源代码的错误位置
 *  hidden-source-map：外部  
    错误代码错误原因，但是没有错误位置  
    不能追踪源代码错误，只能提示到构建后代码的错误位置
 *  eval-source-map：内联  
    每一个文件都生成对应的source-map，都在eval  
    错误代码准确信息 和 源代码的错误位置
 *  nosources-source-map：外部  
    错误代码准确信息, 但是没有任何源代码信息
 *  cheap-source-map：外部  
    错误代码准确信息 和 源代码的错误位置  
    只能精确的行
 *  cheap-module-source-map：外部  
    错误代码准确信息 和 源代码的错误位置  
    module会将loader的source map加入

#### 3、内联 和 外部的区别 ####

*  外部生成了文件，内联没有
 *  内联构建速度更快

#### 4、如何选择 ####

##### （1）开发环境：需要速度快，调试更友好 #####

*  速度快(eval>inline>cheap>…)  
    eval-cheap-souce-map  
    eval-source-map
 *  调试更友好  
    souce-map  
    cheap-module-souce-map  
    cheap-souce-map
 *  最好选择：eval-source-map / eval-cheap-module-souce-map

##### （2）生产环境：源代码要不要隐藏? 调试要不要更友好？ #####

*  内联会让代码体积变大，所以在生产环境不用内联
 *  nosources-source-map 全部隐藏
 *  hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
 *  最好选择： source-map / cheap-module-souce-map

## 四、oneOf ##

*  设置只匹配一个loader
 *  注意：不能有两个配置处理同一种类型文件

所以我们可以先把下图所示代码提前，该代码配置有`enforce: 'pre'`，优先执行（正常来讲，一个文件只能被一个loader处理，当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：先执行eslint 在执行babel）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]  
然后将其他loader放在 `oneOf :[]`里：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

## 五、缓存 ##

#### 1、babel缓存 ####

**让第二次打包构建速度更快**

cacheDirectory: true

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]

#### 2、文件资源缓存 ####

##### （1）hash：每次wepack构建时会生成一个唯一的hash值 #####

**问题：因为js和css同时使用一个hash值。如果重新打包，会导致所有缓存失效。（可能我只改动一个文件）。**

##### （2）chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样 #####

**问题：js和css的hash值还是一样的。因为css是在js中被引入的，所以同属于一个chunk。**

##### （3）contenthash：根据文件的内容生成hash值。不同文件hash值一定不一样 #####

**让代码上线运行缓存更好使用。**

filename: 'js/built.[contenthash:10].js',

![在这里插入图片描述][20201218164453523.png]

new MiniCssExtractPlugin({ 
      filename: 'css/built.[contenthash:10].css'
    }),

![在这里插入图片描述][20201218164601406.png]

## 六、tree shaking：去除无用代码 ##

**前提：1. 必须使用ES6模块化 2. 开启production环境**

**作用: 减少代码体积**

\*\*在package.json中配置 \*\*

"sideEffects": false //所有代码都没有副作用（都可以进行tree shaking）

**上述代码问题：可能会把css / @babel/polyfill （副作用）文件干掉，可改用下面的。**

"sideEffects": ["*.css"]

## 七、code split：代码分割 ##

#### 1、方式一： ####

**定义多入口，将不同的入口文件打包为不同的 chunk ，构建后的文件中有两个单独的 js，且可以通过 `[name]` 分别取文件名进行区分。**

// 单入口
    // entry: './src/js/index.js',
    
    entry: { 
      // 多入口：有几个入口，最终输出就有几个bundle
      index: './src/js/index.js',
      test: './src/js/test.js'
    },
    output: { 
      // [name]：取文件名
      filename: 'js/[name].[contenthash:10].js',
      path: resolve(__dirname, 'build')
    },

![在这里插入图片描述][20201218172032460.png]

#### 2、方式二： ####

**配置 optimization 可以将 node\_modules 中代码单独打包一个 chunk ，最终输出。如果是多入口，可自动分析多入口 chunk 中，有没有公共的文件，如果有会打包成单独一个 chunk 。**

optimization: { 
      splitChunks: { 
        chunks: 'all'
      }
    },

![在这里插入图片描述][20201218173351183.png]

#### 3、方式三： ####

**import动态导入语法：能将某个文件单独打包。**

**通过js代码，让某个文件被单独打包成一个 chunk。如下所示，在 index.js 中通过 import 语法，将引入的 test.js 单独打包为一个 chunk。**

import(/* webpackChunkName: 'test' */'./test')
      .then(({  mul, count }) => { 
        // eslint-disable-next-line
        console.log("文件加载成功~");
      })
      .catch(() => { 
        // eslint-disable-next-line
        console.log('文件加载失败~');
      });

**其中，`/* webpackChunkName: 'test' */`，设置打包的名字。**

\*\*webpack.config.js 中仍然使用单入口和 optimization \*\*  
![在这里插入图片描述][20201218174741983.png]  
![在这里插入图片描述][2020121817475079.png]

## 八、lazy loading：懒加载 ##

#### 1、**懒加载：当文件需要使用时才加载** ####

test.js 文件中：

console.log('test.js文件被加载了~');
    
    export function mul(x, y) { 
      return x * y;
    }
    
    export function count(x, y) { 
      return x - y;
    }

index.js文件中：

console.log('index.js文件被加载了~');
    
    document.getElementById('btn').onclick = function() { 
      import(/* webpackChunkName: 'test'*/'./test').then(({  mul }) => { 
        console.log(mul(4, 5));
      });
    };

index.html文件中：

当我点击按钮时，下图所示部位实现了懒加载：  
![在这里插入图片描述][2020121818011818.png]  
**其中 `/* webpackChunkName: 'test'*/`是设置名称。**

#### 2、prefetch 预加载：会在使用之前，提前加载js文件 ####

**和正常加载的区别：**

*  **正常加载可以认为是并行加载（同一时间加载多个文件）**
 *  **预加载是 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源**

index.js文件中：

console.log('index.js文件被加载了~');
    
    document.getElementById('btn').onclick = function() { 
      import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({  mul }) => { 
        console.log(mul(4, 5));
      });
    };

**其中 `/* webpackPrefetch: true*/`是设置预加载。**

**在未点击按钮时，如下图所示显然已预加载test.js文件。当我们点击时，其实读取的是之前那个test.js文件。**  
![在这里插入图片描述][20201218181745632.png]

## 九、pwa： 渐进式网络开发应用程序（离线可访问） ##

#### 1、先配置使用 workbox-webpack-plugin 插件，生成一个 serviceWorker 配置文件 ####

npm install --save workbox-webpack-plugin

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

new WorkboxWebpackPlugin.GenerateSW({ //生成一个 serviceworker 配置文件~
      clientsClaim: true,//帮助serviceworker快速启动
      skipWaiting: true//删除旧的 serviceworker
    })

#### 2、在入口文件 index.js 中注册 serviceWorker ####

// 注册serviceWorker
    // 处理兼容性问题
    if ('serviceWorker' in navigator) { 
      window.addEventListener('load', () => { 
        navigator.serviceWorker
          .register('/service-worker.js')
          .then(() => { 
            console.log('sw注册成功了~');
          })
          .catch(() => { 
            console.log('sw注册失败了~');
          });
      });
    }

此处需要注意的是，eslint不认识 window、navigator全局变量，  
解决：需要修改package.json中eslintConfig配置

"env": { 
        "browser": true // 支持浏览器端全局变量
      }

![在这里插入图片描述][20201218185109590.png]

#### 3、webpack 打包 ####

#### 4、安装 serve 并运行 ####

npm i serve -g

serve -s build //启动服务器，将build目录下所有资源作为静态资源暴露出去

sw代码必须运行在服务器上 方式1：node.js，方式2：serve ，这里用的方式2。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 5]

#### 5、打开浏览器 ####

如下图所示可以看到注册的serviceWorker  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 6]  
在下图所示地方可以看到缓存的数据，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 7]  
将浏览器置于 offine ，资源同样可以加载出来。

## 十、多进程打包 ##

npm i thread-loader -D

一般给babel用，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 8]

## 十一、external ##

**externals 配置选项提供了从输出的 bundle 中排除依赖的方法。防止将某些 import 的包打包到 bundle 中，而是在运行时再去从外部获取这些扩展依赖。以jQuery为例。**

externals: { 
      // 拒绝jQuery被打包进来
      jquery: 'jQuery'
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 9]

import $ from 'jquery';
    
    console.log($);

## 十二、dll：动态链接库 ##

**引进的第三方模块在打包会被打包进最后生成的文件之中，导致最后生成的文件过大，同时也增加了打包的时间。dll可以将所有引入的库只打包一次，在不升级这些库的情况下，不需要重新打包。**

新建 webpack.dll.js 文件：

/* 使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包 当你运行 webpack 时，默认查找 webpack.config.js 配置文件 需求：需要运行 webpack.dll.js 文件 --> webpack --config webpack.dll.js */
    
    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: 'production'
    };

webpack.config.js文件：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const webpack = require('webpack');
    const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
    
    module.exports = { 
      entry: './src/index.js',
      output: { 
        filename: 'built.js',
        path: resolve(__dirname, 'build')
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html'
        }),
        // 告诉webpack哪些库不参与打包，同时使用时的名称也得变~
        new webpack.DllReferencePlugin({ 
          manifest: resolve(__dirname, 'dll/manifest.json')
        }),
        // 将某个文件打包输出去，并在html中自动引入该资源
        new AddAssetHtmlWebpackPlugin({ 
          filepath: resolve(__dirname, 'dll/jquery.js')
        })
      ],
      mode: 'production'
    };

webpack --config webpack.dll.js

webpack

![在这里插入图片描述][20201219171356497.png]  
**这个博客到这终于结束了，emmm，后面的部分隔了一个多周才学才写，好像听的不是很认真了，有点敷衍。。。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221120/076a9b7e199b4cf4a77cfcd6962885c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221120/3e50bbc7cd904a12ad069fdf0b8700ac.png
[20201208075052860.png]: /images/20221120/e1e7469c709945618e2d539681a3a599.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: /images/20221120/7a13f71ece084af7905fd4bd766e6aa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: /images/20221120/c049ff8ef5b84e2689da4c4bc49b9748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]: /images/20221120/46ae9a4a9af34a8fac079b9bf795fb58.png
[20201218164453523.png]: /images/20221120/953baa47b48545618844ef6db18cf003.png
[20201218164601406.png]: /images/20221120/55759c4443624e8ca59b5b2c31f727cf.png
[20201218172032460.png]: /images/20221120/cc380dbb2177485492002178582ff2f9.png
[20201218173351183.png]: /images/20221120/b41c303e344d45cfb39acf76efd309f9.png
[20201218174741983.png]: /images/20221120/ac924f633ea045dd89d3b5c1fb12daf1.png
[2020121817475079.png]: /images/20221120/43069281c8044efb85e080414ef39078.png
[2020121818011818.png]: /images/20221120/e057a67ddafa4fd5a73cd3d110fb42af.png
[20201218181745632.png]: /images/20221120/1a62d1fea0b94e9aa84f7f988d5ae239.png
[20201218185109590.png]: /images/20221120/7641bc89f53a4bcb91ef34cdbb518c13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 5]: /images/20221120/bdb12b17011e40c49d52f715a63840d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 6]: /images/20221120/7d2bc40006804654ba39ef461aaa124b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 7]: /images/20221120/c4070fb082314bf89235e30e08d9245b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 8]: /images/20221120/9b698df88256478384ccfe4a346bd06f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 9]: /images/20221120/7b6d00dd4c44414fb59b5c6610e25c75.png
[20201219171356497.png]: /images/20221120/44b039dcb0e34e7ea5e31026ec8176a4.png