性能文章>用Webpack这15个点,速度提升70%,体积减小80%!>

用Webpack这15个点,速度提升70%,体积减小80%!转载

178001

导语

使用webpack打包躲不开的就是webpack优化这个话题,无论是面试还是实际开发,优化都是非常重要的事情,毕竟提升用户体验是我们前端工程师的职责。

正文


构建时间优化

首先就是构建时间的优化了

thread-loader


多进程打包,可以大大提高构建的速度,使用方法是将thread-loader放在比较费时间的loader之前,比如babel-loader

由于启动项目和打包项目都需要加速,所以配置在webpack.base.js

npm i thread-loader -D
// webpack.base.js

{
        test: /\.js$/,
        use: [
          'thread-loader',
          'babel-loader'
        ],
      }
}


cache-loader


缓存资源,提高二次构建的速度,使用方法是将cache-loader放在比较费时间的loader之前,比如babel-loader

由于启动项目和打包项目都需要加速,所以配置在webpack.base.js

npm i cache-loader -D
// webpack.base.js

{
        test: /\.js$/,
        use: [
          'cache-loader',
          'thread-loader',
          'babel-loader'
        ],
},


开启热更新


比如你修改了项目中某一个文件,会导致整个项目刷新,这非常耗时间。如果只刷新修改的这个模块,其他保持原状,那将大大提高修改代码的重新构建时间

只用于开发中,所以配置在webpack.dev.js

// webpack.dev.js

//引入webpack
const webpack = require('webpack');
//使用webpack提供的热更新插件
   plugins: [
   new webpack.HotModuleReplacementPlugin()
    ],
    //最后需要在我们的devserver中配置
     devServer: {
+     hot: true
    },


exclude & include

  • exclude:不需要处理的文件
  • include:需要处理的文件

合理设置这两个属性,可以大大提高构建速度

在webpack.base.js中配置

// webpack.base.js

      {
        test: /\.js$/,
        //使用include来指定编译文件夹
        include: path.resolve(__dirname, '../src'),
        //使用exclude排除指定文件夹
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      },


构建区分环境


区分环境去构建是非常重要的,我们要明确知道,开发环境时我们需要哪些配置,不需要哪些配置;而最终打包生产环境时又需要哪些配置,不需要哪些配置:

开发环境:去除代码压缩、gzip、体积分析等优化的配置,大大提高构建速度
生产环境:需要代码压缩、gzip、体积分析等优化的配置,大大降低最终项目打包体积


提升webpack版本


webpack版本越新,打包的效果肯定更好

打包体积优化


主要是打包后项目整体体积的优化,有利于项目上线后的页面加载速度提升


CSS代码压缩


CSS代码压缩使用css-minimizer-webpack-plugin,效果包括压缩、去重

代码的压缩比较耗时间,所以只用在打包项目时,所以只需要在webpack.prod.js中配置

npm i css-minimizer-webpack-plugin -D
// webpack.prod.js

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 去重压缩css
    ],
  }

JS代码压缩


JS代码压缩使用terser-webpack-plugin,实现打包后JS代码的压缩

代码的压缩比较耗时间,所以只用在打包项目时,所以只需要在webpack.prod.js中配置

npm i terser-webpack-plugin -D
// webpack.prod.js

const TerserPlugin = require('terser-webpack-plugin')

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 去重压缩css
      new TerserPlugin({ // 压缩JS代码
        terserOptions: {
          compress: {
            drop_console: true, // 去除console
          },
        },
      }), // 压缩JavaScript
    ],
  }

tree-shaking


tree-shaking简单说作用就是:只打包用到的代码,没用到的代码不打包,而webpack5默认开启tree-shaking,当打包的mode为production时,自动开启tree-shaking进行优化

module.exports = {
  mode: 'production'
}


source-map类型


source-map的作用是:方便你报错的时候能定位到错误代码的位置。它的体积不容小觑,所以对于不同环境设置不同的类型是很有必要的。

  • 开发环境


开发环境的时候我们需要能精准定位错误代码的位置

// webpack.dev.js

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map'
}

 

  • 生产环境


生产环境,我们想开启source-map,但是又不想体积太大,那么可以换一种类型

// webpack.prod.js

module.exports = {
  mode: 'production',
  devtool: 'nosources-source-map'
}

 

打包体积分析


使用webpack-bundle-****yzer可以审查打包后的体积分布,进而进行相应的体积优化

只需要打包时看体积,所以只需在webpack.prod.js中配置

npm i webpack-bundle-****yzer -D
// webpack.prod.js

const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-****yzer')

  plugins: [
    new BundleAnalyzerPlugin(),
]


用户体验优化


模块懒加载


如果不进行模块懒加载的话,最后整个项目代码都会被打包到一个js文件里,单个js文件体积非常大,那么当用户网页请求的时候,首屏加载时间会比较长,使用模块懒加载之后,大js文件会分成多个小js文件,网页加载时会按需加载,大大提升首屏加载速度

// src/router/index.js

const routes = [
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/home',
    name: 'home',
    // 懒加载
    component: () => import('../views/home/home.vue'),
  },
]


Gzip


开启Gzip后,大大提高用户的页面加载速度,因为gzip的体积比原文件小很多,当然需要后端的配合,使用compression-webpack-plugin

只需要打包时优化体积,所以只需在webpack.prod.js中配置

npm i compression-webpack-plugin -D
// webpack.prod.js

const CompressionPlugin = require('compression-webpack-plugin')

  plugins: [
    // 之前的代码...
    
    // gzip
    new CompressionPlugin({
      algorithm: 'gzip',
      threshold: 10240,
      minRatio: 0.8
    })
  ]


小图片转base64


对于一些小图片,可以转base64,这样可以减少用户的http网络请求次数,提高用户的体验。webpack5中url-loader已被废弃,改用asset-module

在webpack.base.js中配置

// webpack.base.js

{
   test: /\.(png|jpe?g|gif|svg|webp)$/,
   type: 'asset',
   parser: {
     // 转base64的条件
     dataUrlCondition: {
        maxSize: 25 * 1024, // 25kb
     }
   },
   generator: {
     // 打包到 image 文件下
    filename: 'images/[contenthash][ext][query]',
   },
},


合理配置hash


我们要保证,改过的文件需要更新hash值,而没改过的文件依然保持原本的hash值,这样才能保证在上线后,浏览器访问时没有改变的文件会命中缓存,从而达到性能优化的目的

在webpack.base.js中配置

// webpack.base.js

  output: {
    path: path.resolve(__dirname, '../dist'),
    // 给js文件加上 contenthash
    filename: 'js/chunk-[contenthash].js',
    clean: true,
  },

 

更多思考:

关于webpack的优化已经给大家总结好了!更多关于webpack的内容大家可以阅读以下内容加深学习和实践!

我的第一次webpack优化,首屏渲染从9s到1s

使用 webpack 进行 Web 性能优化(一)

使用 webpack 进行 Web 性能优化(二)

使用 webpack 进行 Web 性能优化(三)

 

分类:
标签:
请先登录,再评论

暂无回复,快来写下第一个回复吧~

为你推荐

webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
玩转 webpack5(上)
前言本篇长文是学习程柳峰老师开设的《玩转 webpack》专栏的实践笔记,和专栏不一样的是,我的实战源码是基于 webpack5,它的配置和源码实现上与 webpack4 有许多不同的地方,感兴趣的同学可以结合我在上面放出的源码仓库进行学习,相信会有不小的收获。看完本篇长文,你将收获:能
使用 webpack 进行 Web 性能优化(三)
即使您配置 webpack 以使应用程序尽可能小,跟踪它并知道它包含什么仍然很重要。 否则,您可以安装一个使应用程序变大两倍的依赖项——甚至不会注意到它!本节介绍可帮助您了解捆绑包的工具。跟踪包大小要监控您的应用程序大小,请在开发期间使用 webpack-dashboa
使用 webpack 进行 Web 性能优化(二)
改善应用程序加载时间的下一件事(在优化应用程序大小之后)是缓存。 使用它将应用程序的某些部分保留在客户端上,并避免每次都重新下载它们。使用包版本控制和缓存标头进行缓存的常用方法:告诉浏览器将文件缓存很长时间(例如,一年): # Server headerCache-Contro
webpack构建速度和体积优化策略
前言对自己性能优化以及webpack优化进行总结,目前文章对webpack进行了描述,后续会对webpack之前的性能进行总结。整体脑图如下:  初级分析:使用webpack内置的stats在package.json中使用stats "scripts": {
领导:小伙子,咱们这个页面出来太慢了!赶紧给我优化一下!
性能优化这样一个词应该已经是老生常谈了,不仅在面试中面试官会以此和你掰头,而且在工作中领导也会因为网页加载速度慢来敲打你学(打)习(工),那么前端性能优化,如果判断到底需不需要做,如果需要做又怎么去做或者说怎么去找到优化的切入点? 接下来让我们一起来探索前端性能优化(emo~&n
我的第一次webpack优化,首屏渲染从9s到1s
大家好,我是考拉🐨,本文基于vue2(虽然vue3已出,但是本文也很实用)谈到webpack优化大部分人可能都看腻了,无非就那几招嘛,我之前也是看过许多类似的文章,但都没有自己真正上手过,下面是我用公司的项目真实操练下来的,首屏加载速度提升很大(刷刷的),希望能帮到你。废话不多说,先
微医对于webpack5持久化缓存优化的实践
导语 1、公司的云his静态项目代码量巨大,依赖的npm包大概有100个,打包一次大概要14分钟;2、自研的hammer工具的本地打包虽然能提升部署时间,但是依赖开发的手动操作;3、用来存放本地构建产物的服务器容量满了,所以为了正常使用本地打包功能,还得定期去清理服务器上的老文件,