Webpack从入门到放弃系列(二)---性能优化篇

一、懒加载

webpack的懒加载主要是利用了es6的模块异步加载语法import()来实现的懒加载

懒加载实际上并不是webpack里面的一个概念,而是ES里面提出的这样一个实验性质的语法,它和webpack本质上关系不大,webpack只不过是能够识别出这种import语法,然后对它引入的代码模块进行代码分割而已

二、公共代码抽离(code splitting)

  • 代码分割的意义:1,可以防止业务代码修改后,公用的代码重复加载。2,避免公用代码被重复加载
  • webpack 代码分割的俩种方式: 1、异步语法加载模块webpack默认进行代码分割如下:
    Webpack从入门到放弃系列(二)---性能优化篇_第1张图片
    2、同步代码分割需要配置optimization,如下:
    optimization: {
      splitChunks: {
        chunks: "all",
        cacheGroups: {
          vendors: false,
          default: false,
        }
      }
    }
  • 需要注意的几个坑:
    1、魔法注释不生效的问题:
    需要在output里设置chunkFilename:
    Webpack从入门到放弃系列(二)---性能优化篇_第2张图片
    2、optimization各项配置的具体作用:(如下)
splitChunks: { // 代码分隔配置
       /*
       * 选择要进行分割的包
       * 可选值: all(推荐), async(默认,只分隔异步代码), and initial(只分割同步代码)
       * 还可以传入函数精确控制
       * chunks (chunk) {
            // exclude `my-excluded-chunk`
            return chunk.name !== 'my-excluded-chunk';
          }
       * */
       chunks: 'all',

       // 默认,大于30k的包才做代码分割
       minSize: 30000,

       // 默认,分割出来的每个包最大size,
       // 比如设为50000(50kb),那如果某个包分离出来后超过50kb,就会进行再分割,保证每个文件都不超过50kb
       maxSize: 0,

       // 默认,至少被引入一次就进行代码分隔
       minChunks: 1,

       // 默认,浏览器最多并行请求5个js文件,也就是说,分割数量超过5个时,就会停止代码分割了
       maxAsyncRequests: 5,

       // 默认,对于入口文件最多只分割3个js包,超过3个就停止
       maxInitialRequests: 3,

       // 默认,文件名连接符
       automaticNameDelimiter: '~',

       // 默认,分割后的文件名将根据chunks和cacheGroups自动生成名称。
       name: true,

       cacheGroups: {
        vendors: {  // vendors是组名

          // 默认,只对node_modules里的代码进行分隔
          test: /[\\/]node_modules[\\/]/,

          /*
            默认,每个组都会有个优先级,
            如果某个包满足多个组的test规则,就按优先级来判断归哪个组
            数值越大,优先级越高
          */
          priority: -10,

          // 分割后的文件名(默认是:组名~入口名.js,即verdors~main.js)
          filename: 'vendors.js',

          // 强制分隔,无视minChunks、maxAsyncRequests等选项,默认false
          enforce: true
        }
      },


      default: {  // default是组名, 分隔不在node_modules里的代码
        minChunks: 2,   // 默认
        priority: -20,    // 默认

        /*
          复用已存在的chunk,
          比如index.js里引入axios和test.js
          test里也引入了axios,那么axios就会被复用
        */
        reuseExistingChunk: true
      },

      /*
      * 将项目所有css打包到一个文件中
      * 还可以分入口打包:https://webpack.js.org/plugins/mini-css-extract-plugin
      * */
      styles: {
        name: 'styles',
        test: /\.less$/,
        chunks: 'all',
        enforce: true,
      }
     }
   }

三、 webpack与浏览器缓存

  • 由于浏览器的缓存机智,所以webpack引入了contenthash变量占位符,用来防止代码更新后浏览器不去请求最新代码的问题。 如下:
    Webpack从入门到放弃系列(二)---性能优化篇_第3张图片

四、样式代码的分割以及压缩

1、样式代码的分割使用插件MiniCssExtractPlugin, 具体请参考Webpack从入门到放弃系列(一)—基础篇中的2.9。
2、样式代码压缩使用optimize-css-assets-webpack-plugin插件, 安装插件配置如下:


    optimization: {
      splitChunks:{
        chunks: "all",
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      },
      minimizer: [
        new OptimizeCSSAssetsPlugin({
          assetNameRegExp: /\.css$/g,
          cssProcessor: require('cssnano'),
          cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
          canPrint: true
        }),
      ],
    }

五、代码预加载prefetch 和preload

  • 在异步的代码中加入魔法注释 /* webpackPrefetch: true */,如下:
// 代码预加载start // 
document.body.addEventListener('click', () => {
  import( /* webpackPrefetch: true */ /*webpackChunkName: 'clickfn'*/'./click').then(({default: clicktest})=>{
    clicktest()
  })
})
// 代码预加载end //
  • 注意:
    1、区别: Prefetch 会等待核心代码加载完之后,有空闲之后再去加载。Preload 会和核心的代码并行加载,还是不推荐
    总结:
    针对优化,不仅仅是局限于缓存,缓存能带来的代码性能提升是非常有限的,而是如何让代码的使用率最高,有一些交互后才用的代码,可以写到异步组件里面去,通过懒加载的形式,去把代码逻辑加载进来,这样会使得页面访问速度变的更快,如果觉得懒加载会影响用户体验,可以使用 Prefetch 这种方式来预加载
    2、使用chrom浏览器,打开调试工具,然后Ctrl+Shift+p,输入Coverage,选择show coverage插件,可以查看当前页面的代码使用率。如下图:
    Webpack从入门到放弃系列(二)---性能优化篇_第4张图片

  • 最后推荐一篇文章 传送门

  • 学习的中的代码git 仓库地址

你可能感兴趣的:(webpack)