webpack性能优化

Posted 飞鸟和蝉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于webpack性能优化的主要内容，如果未能解决你的问题，请参考以下文章

Webpack 性能优化

Webpack 性能优化系列 - oneOf

Webpack 性能优化

webpack构建优化

webpack构建优化

webpack性能优化