likes
comments
collection
share

Webpack项目优化实战:一文搞定打包体积优化

作者站长头像
站长
· 阅读数 32
目录:
前言
1、删除多余包/模块
2、antd按需加载
3、使用图片压缩

前言:之前使用React + antd-mobile写的项目已经打包上线,目前打算对其进行一系列的优化,那么首当其冲的就是Webpack相关的优化。关于Webpack的优化主要集中在两点:1)打包体积的优化,最主要的环节之一,直接影响项目页面的加载速度2)打包速度的优化,主要影响开发效能的环节本篇文章负责记录我使用Webpack在打包体积优化方面做的所有工作和成果。

在正式优化前,先得分析项目优化前的打包体积,以及各个部分占体积的多少这里借助 webpack-bundle-analyzer 插件,它可以分析打包的总体积、各个组件的体积以及引入的第三方依赖的体积。

yarn add webpack-bundle-analyzer -D

这样就可以在http://127.0.0.1:8888看到各部分占体积的多少Webpack项目优化实战:一文搞定打包体积优化

从上图可以看出来antd-mobile、react-dom 还有chunk.js等都是占据体积非常大的模块,也是我们本次优化的重点关照对象。

本次优化前打包体积大小为:4.72M,那么开始优化。


1、删除冗余包和模块运行项目时,可以通过浏览器调试的warning看到项目中引入,但没有使用的模块、包或变量,这些都是可以删除来优化打包体积的,这作为优化的第一步:Webpack项目优化实战:一文搞定打包体积优化


2、antd按需加载我们引入antd模块,默认是全部引入的,但是实际使用的只有我们项目中使用的几个模块。我的项目中使用的是antd-mobile,默认情况下会有如下提示:Webpack项目优化实战:一文搞定打包体积优化

这就提醒我们引入babel-plugin-import实现antd-mobile的部分模块引入。

npm install babel-plugin-import --save-dev

此外还需要配置项目的.babelrc文件,放入src文件夹Webpack项目优化实战:一文搞定打包体积优化

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile",
        "style": "css"
      }
    ]
  ]
}

按需引入antd后打包体积优化明显,从4.72M ~ 4.16M


3、图片压缩图片占据很大的体积,在打包时进行图片压缩能有效减少打包体积。这里使用 image-minimizer-webpack-plugin 配合 imagemin 可以在打包时实现图片的压缩。

npm install image-minimizer-webpack-plugin imagemin imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

或者简单的引入image-webpack-loader进行全部图片的匹配压缩npm install image-webpack-loader -D需要在Webpack.config.js中进行相关配置:

// install
npm i image-webpack-loader -D
// vue.config.js
chainWebpack: (config) => {
    if (isProd) {
        // 图片压缩处理
        const imgRule = config.module.rule('images')
        imgRule
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
    }
}

4、图片转 WebpWebp图片有着体积小,分辨率高的特点,可以通过imagemin-webpack-plugin插件实现打包过程中图片的转化。

引入模块
const ImageminWebP = require('imagemin-webp')
const ImageminPlugin = require('imagemin-webpack-plugin').default
const CopyWebpackPlugin = require('copy-webpack-plugin')

插件部分
 plugins: [
      // 打包体积
      new BundleAnalyzerPlugin(),
      // 图片转webp
      new CopyWebpackPlugin([
        {
          from: '../public/images/**/**',
          to: '../public/images/[name].webp',
        },
      ]),
      new ImageminPlugin({
        // imagemin-webp docs: https://github.com/imagemin/imagemin-webp
        plugins: [ImageminWebP({ quality: 50 })],
      }),

经过一系列的优化之后,打包后的体积也达到了 3.92M 的大小,虽然仍不算小,但是比一开始还是有了不少改进,后续还会继续提升!

转载自:https://segmentfault.com/a/1190000041364233
评论
请登录