乐趣区

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

jiezi 
目录：前言
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 看到各局部占体积的多少

从上图能够看进去 antd-mobile、react-dom 还有 chunk.js 等都是占据体积十分大的模块，也是咱们本次优化的重点关照对象。

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

1、删除冗余包和模块
运行我的项目时，能够通过浏览器调试的 warning 看到我的项目中引入，但没有应用的模块、包或变量，这些都是能够删除来优化打包体积的，这作为优化的第一步：

2、antd 按需加载
咱们引入 antd 模块，默认是全副引入的，然而理论应用的只有咱们我的项目中应用的几个模块。我的我的项目中应用的是 antd-mobile，默认状况下会有如下提醒：

这就揭示咱们引入 babel-plugin-import 实现 antd-mobile 的局部模块引入。

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

此外还须要配置我的项目的.babelrc 文件，放入 src 文件夹

{
  "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()}
}

通过一系列的优化之后，打包后的体积也达到了 3.92M 的大小，尽管仍不算小，然而比一开始还是有了不少改良，后续还会持续晋升！

退出移动版