webpack性能优化

1. HMR: hot module replacement 热模块替换 / 模块热替换

2. webpack配置-source-map（让错误无处可逃）

3. webpack优化系列-oneOf

4. wepack与浏览器缓存-contenthash

5. webpack-tree shaking(树摇)

6. webpack-code split

7. webpack lzy loading(懒加载和预加载)

1.HMR: hot module replacement 热模块替换 / 模块热替换

作用: 一个模块发生变化, 只会重新打包这一个模块(而不是打包所有模块)极大提升构建速度 (开发环境)

• 　　html文件: 默认不能使用HMR功能, 同时会导致问题:html文件不能热更新了~(不用做HMR功能)

 　　　      解决: 修改entry入口, 将html文件引入

•   css样式文件: 可以使用HMR功能: 因为style-loader内部实现了  使用方法: hot:true 

•   js文件: 不能使用HMR功能 ---> 需要修改js代码, 添加支持HMR功能的代码

       注意: HMR功能对js的处理, 只能处理非入口js文件的其他文件.(入口文件做不了HMR功能)

 

2.webpack配置-source-map（让错误无处可逃）

 1.设置一个错误

function add() {
  console.log(123)
}
console.log(add())();

2.打开webpack.config.js配置devtool

devtool: 'source-map'

3.运行 打包webpack,

source-map是外部的, 会生成一个built.js.map文件

4.打开项目

npx webpack-dev-server 只会在内存中编译打包,没有输出

查看控制台

5.devtool的全部值及介绍

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

    [inline-|hidden-|eval-] [nosources] [cheap-[module-]]source-map
    source-map:外部--->错误代码准确信息, 源代码的错误位置
    inline-source-map:内嵌--->错误代码准确信息 和源代码的错误位置
    hidden-source-map:外部--->错误代码错误原因, 但没有错误位置,不能追踪源代码错误(隐藏源代码)
    eval-source-map:内嵌--->错误代码准确信息, 源代码的错误位置

    nosources-source-map:外联--->错误代码准确信息,但是没有任何源代码信息(隐藏源代码)
    cheap-source-map:外部--->错误代码准确信息 和 源代码的错误位置,只能精确行
    cheap-module-source-map外部--->错误代码准确信息, 源代码的错误位置

    内联 和 外部的区别: 1. 外部生成了文件 , 内联没有文件, 2. 内联构建速度快

    这么多source-map如何选择？

    开发环境: 速度快，调试更友好
    速度快（ eval>inline>cheap>··· ）
    组合: eval-cheap-source-map > eval-source-map
    调试更友好
    组合source-map > cheap-module-source-map > cheap-source-map
    最终结果：eval-source-map(速度快)和 cheap-module-source-map(性能更好)  (vuecli与react脚手架默认)

    生产环境: 源代码要不要隐藏？调试要不要更友好
    内嵌会让代码体积变大，所以在生产环境下不用 内嵌
    nosources-source-map  全部隐藏
    hidden-source-map   只隐藏源代码，会提示构建后代码错误信息
    最终结果：source-map 和 cheap-module-source-map
*/

6.最终结果

开发环境: eval-source-map 或者 cheap-module-source-map

生产环境: source-map 或者 cheap-module-source-map

3.webpack优化系列-oneOf

优化点: 每个不同类型的文件在loader转换时，都会被命中，遍历module中rules中所有loader(生产依赖)

webpack.config.js

const { resolve } = require('path');
const htmlWebpackPlugins = require('html-webpack-plugin')// 引入html插件
const cssWebpackPlugins = require('mini-css-extract-plugin')// 引入单独css插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')//压缩css

// 定义node环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
    cssWebpackPlugins.loader,// 单独的css文件
  'css-loader', {
    // 还需在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => {
        require('postcss-preset-env')();
      },
    },
  },
]

/* 
正常来讲，一个文件只能被一个loader处理
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
  先执行eslint再执行babel
*/
module.exports = {
  entry: './src/js/index.js', // 入口文件
  output: {// 出口文件
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      { // 检查js语法eslint
        // 在package.josn中eslintConfig --> airbnb
        test: /.js$/,
        exclude: /node_module/,// 排除
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true // eslit自动帮你格式化js的不规范语法
        }
      },
    {
      // 以下loader只会匹配一个
      // 注意: 不能有两个配置处理同一种类型文件
      oneOf:[  
        {// 打包css
        test: /.css$/,
        use: [
          ...commonCssLoader
        ],
      },
      {// 打包scss
        test: /.scss$/,
        use: [
          ...commonCssLoader, // 引入loader
          'sass-loader',
        ],
      },
      /*
          正常来讲，一个文件只能被一个loader处理。
          当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
            先执行eslint 在执行babel
        */
      {  // js兼容性
        // 在package.josn中eslintConfig --> airbnb
        test: /.js$/,
        exclude: /node_module/,// 排除
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                  // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: { version: 3 },
                targets: {
                  chrome: '60',
                  firefox: '50',
                  ie: '9',
                  edge: '17',
                  safari: '10'
                },
              },
            ],
          ],
        }
      },
      {// 打包图片
        test: /.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',//保存的路径
          esModule: false,//关闭es6模块化
          name:'[hash:10].[ext]',// 处理后的名字长度
        }
      },
      {// 打包html插入的图片
        test: /.html$/,
        loader: 'html-loader'
      },
      {// 打包其他文件, 除了上面打包过的
        exclude: /.(js|css|less|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'media',//保存的路径
          name:'[hash:10].[ext]',// 处理后的名字长度
        }
      }]
    }
    ],
  },
  plugins: [
    new cssWebpackPlugins({ // 打包成单独的css插件
      filename: 'css/build.css',
    }),
    new OptimizeCssAssetsWebpackPlugin(), // 压缩css插件
    new htmlWebpackPlugins({ // html插件
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,// 清除两边空白
        removeComments: true// 清除备注
      }
    })
  ],
  mode: 'production', // 环境模式,
  devtool:'source-map'// 报错追踪
};

4.wepack与浏览器缓存之contenthash

1.babel缓存

    babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，

    造成代码体积大冗余，同时也会减慢编译效率所以要在babel

    开启babel缓存 : cacheDirectory:true

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

2.文件资源缓存(生产依赖)

2.1使用hash值:

      hash: 每次使用webpack打包构建时会生成一个唯一的hash值

        可以给打包出口的.js 和 单独打包的.css的文件名,动态添加hash值,

        这样可以达到修改源码,服务器也会改变,因为每次打包文件名都变了,服务器需要重新找

        问题: 但是js 和 css 同时用一个hash值

        如果重新打包, 会导致所有缓存失效.(可能就因为改一个文件,就导致整个缓存失效)

               

                   

 2..2使用chunkhash值:

     chunkhash: 根据chunk生成的hash值. 如果打包来源同一个chunk, 那么hash值就一样,

           但是:使用chunkhash了, js 和css 的hash值还是一样的

           因为:css是在 入口js中被引入的, 所以同属于一个chunk(所以hash值还是一样的)

               

         

2.3最终武器contenthash登场:

contenthash: 根据文件的内容生成hash值, 不同文件hash值一定不一样

      contenthash作用:

        通过使用contenthash,可以做到重新打包代码上线的时候,用户只需要更新有变化的代码,

        而没有变化的代码,用户可以直接使用本地缓存

      contenthash功能:

        源代码发生变化, contenthash则发生变化

        源代码不变, contenthash不变

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

css 和 js 的 hash 终于不一样了
 

然后修改一下 js文件,看看hash值是否发生变化:发现只有js的hash值变了, css还是和上面的一样,这就说明了:

源代码发生变化, contenthash则发生变化,

因为没有修改css文件,所以css的hash不会发生变化

 css请求的是缓存中的 数据没有发送请求(所以hash没有变)

js的文件被修改了,hash也会跟着改变, (服务器又找不到之前的js名,所以又重新发送请求了)

 wenpack.config.js *需要自己配置 一个node服务器来 测试运行

const { resolve } = require('path');
const htmlWebpackPlugins = require('html-webpack-plugin')// 引入html插件
const cssWebpackPlugins = require('mini-css-extract-plugin')// 引入单独css插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')//压缩css

// 定义node环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
    cssWebpackPlugins.loader,// 单独的css文件
  'css-loader', {
    // 还需在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => {
        require('postcss-preset-env')();
      },
    },
  },
]

/* 
正常来讲，一个文件只能被一个loader处理
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
  先执行eslint再执行babel
*/
module.exports = {
  entry: './src/js/index.js', // 入口文件
  output: {// 出口文件
    filename: 'js/build.[contenthash:10].js',// 带上打包的hash值
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      { // 检查js语法eslint
        // 在package.josn中eslintConfig --> airbnb
        test: /.js$/,
        exclude: /node_module/,// 排除
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true // eslit自动帮你格式化js的不规范语法
        }
      },
    {
      // 以下loader只会匹配一个
      // 注意: 不能有两个配置处理同一种类型文件
      oneOf:[  
        {// 打包css
        test: /.css$/,
        use: [
          ...commonCssLoader
        ],
      },
      {// 打包scss
        test: /.scss$/,
        use: [
          ...commonCssLoader, // 引入loader
          'sass-loader',
        ],
      },
      /*
          正常来讲，一个文件只能被一个loader处理。
          当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
            先执行eslint 在执行babel
        */
      {  // js兼容性
        // 在package.josn中eslintConfig --> airbnb
        test: /.js$/,
        exclude: /node_module/,// 排除
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                  // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: { version: 3 },
                targets: {
                  chrome: '60',
                  firefox: '50',
                  ie: '9',
                  edge: '17',
                  safari: '10'
                },
              },
            ],
          ],
          // 开始babel缓存
          // 第二次构件时, 会读取之前的缓存
          cacheDirectory:true
        }
      },
      {// 打包图片
        test: /.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',//保存的路径
          esModule: false,//关闭es6模块化
          name:'[hash:10].[ext]',// 处理后的名字长度
        }
      },
      {// 打包html插入的图片
        test: /.html$/,
        loader: 'html-loader'
      },
      {// 打包其他文件, 除了上面打包过的
        exclude: /.(js|css|less|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'media',//保存的路径
          name:'[hash:10].[ext]',// 处理后的名字长度
        }
      }]
    }
    ],
  },
  plugins: [
    new cssWebpackPlugins({ // 打包成单独的css插件
      filename: 'css/build.[contenthash:10].css',
    }),
    new OptimizeCssAssetsWebpackPlugin(), // 压缩css插件
    new htmlWebpackPlugins({ // html插件
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,// 清除两边空白
        removeComments: true// 清除备注
      }
    })
  ],
  mode: 'production', // 环境模式,
  devtool:'source-map'// 报错追踪
};

服务器配置:server.js

/* node server 开启服务器 */
/* http:localhost:3000 */

// 引入框架
const express = require('express');

// 使用框架
const app = express();

// 中间件
app.use(express.static('build',{maxAge:1000 * 3600}))// 缓存过期时间

// 监听端口
app.listen(3000,function(){
    console.log('服务器开启成功');
    
})

 5.webpack-tree shaking(树摇)

tree shaking：去除应用程序中没有使用到的无用代码

前提：　

　① 使用 ES6 模块化　　

② 开启 production 环境

作用：减少代码体积

test.js

test.js 中定义了 通过 ES6 模块 暴露了 add 和 count 两个方法，

index.js 中 引入了 add 和 count 方法，但是 count 方法的返回值没有使用

 

 

webpack 编译打包后的 js 文件中，没有 count 方法的执行，自动去除了没有使用的无用代码，

当在 package.json 中配置 "sideEffects" : false，时，所有的代码都可以进行 tree shaking，都没有副作用

 

但是，可能会把css / @babel/polyfill （副作用）文件去除

避免这种情况，需要重新配置    "sideEffects": ["*.css", "*.less"]，过滤到这些文件使用 tree shaking

 

 css 文件 保存了

6.webpack-code split

代码分割:

1. 可以把一个大的入口文件 分割 成 多个入口文件,实现并行加载,从而速度更快

2.可以设置成按需加载,比如单页面开发,整个页面非常庞大,所以要根据路由拆分成多个文件,实现按需加载(拆分文件需要用到webpack拆分)

1，在 webpack 中可以定义多入口，将不同的入口文件打包为不同的 chunk

单入口---->只引入一个入口文件

多入口---->引入多个入口文件

多入口打包: 会生成对应的打包文件

2.单入口引入jQuery, jQuery会和入口js,会合并在一起

 

引入jquer

 

后果:入口js 和 jQuery 合并了(这是不允许的)

 解决办法:在module.esxports引入optimization 把jQuery打包成一个单独的文件

/* 
   1.可以将node_modules中代码单独打包一个chunk最终输出
　　2.自动分析多入口chunk中, 有没有公共的文件.如果有会打包成单独一个chunk

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

成功区分 分开打包 入口文件和 jQuery

3.多入口引入jQuery,哪个入口引入了jQuery,jQuery就会和谁合并

index.js 引入了 jQuery, jQuery就main合并了

test.js 也 引入了 jQuery, jQuery也和test合并了

后果:两个入口文件都引入了jQuery----->(这是不允许的,重复加载影响性能)

解决办法: 把jQuery打包成一个单独的文件---实现(多入口公用jQuery)

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

使用optimization后; 会自动把公共的文件(jQuery),单独打包

  

optimizaation的作用是:

自动将node_modules里的依赖,打包成一个单独chunk;

自动分析多入口chunk中, 有没有公共的文件. 如果有会把公共的文件打包成一个单独的chunk(共享)

 

4.通过 js 代码，可以让指定某个文件被单独打包成一个 chunk，

如在 index.js 中通过 import 语法，将引入的 test.js 单独打包为一个 chunk

*从而实现 单入口,打包多个文件

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

/* 
通过js代码, 让某个文件被单独打包成一个chunk
import动态导入语法: 能将某个文件单独打包
*/
//import动态导入语法：能将某个文件单独打包
import(/*webpackChunkName: 'test'*/'./test')//webpackChunkName: 'test',打包命名为text
  .then(({mul,count})=>{// 结构赋值
    console.log(mul(2,5));
  })
  .catch(()=>{
    console.log('文件加载失败');
    
  })
  
  console.log(sum(1, 2, 3, 4, 7, 9));

构建后的文件中，test被单独打包：

此时，webpack 中 entry 还是单入口 index.js

7.webpack lzy loading(懒加载和预加载)

1，正常加载可以认为是并行加载，在同一时间加载多个文件

index.js 中 引入 test.js , 点击按钮之前已经加载了 test.js

 

 2，懒加载：当文件需要使用时才加载

 

构建后

只加载了 index.js ，点击按钮后才会加载 test.js

3,预加载  prefetch：会在使用之前，提前加载 js 文件，等其他资源加载完毕，浏览器空闲了，偷偷加载资源

构建后

 

点击按钮之前就已经全部加载了，重复点击按钮后，不会再加载 test.js