打包构建优化_moment-locales-webpack-plugin-CSDN博客

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
      plugins: [
         new BundleAnalyzerPlugin()
      ]
  }
}

启动项目，在浏览器打开 http://127.0.0.1:8888/ 就能看到分析页面

npm run serve

初始打包速度、初始打包体积

初始打包速度：25386 ms

初始体积：2.25 MB

优化过程

使用 externals 提取公共依赖

分析公共依赖有哪些

从上面的打包分析页面中可以看到，chunk-vendors.js 体积为 2.21M，其中体积大的几个文件是公共依赖包

vue
vue-router
axios
echarts

只要把公共依赖包提取出来，不再打到 chunk-vendors.js 里，就可以解决 chunk-vendors.js 过大的问题

可以使用 externals 告诉 webpack：打包时忽略外部环境提供的依赖

在 vue.config.js 中，配置 externals

在 vue.config.js 中配置

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      echarts: 'echarts'
    }
}

在 index.html 中，使用 CDN 引入依赖（PS：公共 CDN 不够稳定，建议使用公司内网服务器存放 CDN 资源）

  <body>
    <script src="http://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
    <script src="http://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js"></script>
    <script src="http://lib.baomitu.com/axios/1.2.1/axios.min.js"></script>
    <script src="http://lib.baomitu.com/echarts/5.3.2/echarts.min.js"></script>
  </body>

验证 externals 优化效果

配完 externals 后，重新打包，数据如下：

打包速度：18879 ms

打包体积：1.12 MB

使用 externals 后，包体积压缩 50%、打包速度提升 26%

组件库按需引入

为什么不用 externals 处理组件库呢？

组件库按需引入的原理：只引入指定组件及其对应的样式

externals 直接在 html 内引入，只能引入组件库完整的 js 和 css，失去按需引入的功能

使用 babel-plugin-component 按需引入组件库

elementUI 需要借助 babel-plugin-component 插件，实现组件按需引入

安装插件

npm install babel-plugin-component -D

在 babel.config.js 中引入下方配置：

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
};

完成上述操作后，按需引入 Button 组件：

import { Button } from 'element-ui'

Vue.component(Button.name, Button)

编译后的文件（自动引入 button.css）：

得出结论：通过该插件，最终只引入指定组件和样式，可以减少组件库体积大小

验证组件库按需引入优化效果

打包速度：15135 ms

打包体积：648 KB

组件库按需引入后，包体积压缩 72%、打包速度提升 40%

同时 chunk-vendors.css 的体积也有了明显的减少，从 206KB 降到了 82KB

减小三方依赖的体积（比如删除多余语言包）

继续分析打包文件，项目中使用了 momentjs，打包后存在很多没有用到的语言包

使用 moment-locales-webpack-plugin 删除无用语言包

使用 moment-locales-webpack-plugin 插件，可以剔除掉无用的语言包

npm install moment-locales-webpack-plugin -D

vue.config.js 中引入

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  configureWebpack: {
     plugins: [
       new MomentLocalesPlugin({localesToKeep: ['zh-cn']})
     ]
  }
}

验证删除第三方依赖多余语言包优化效果

打包速度：10505 ms

打包体积：407 KB

减小三方依赖体积后，包体积压缩 82%、打包速度提升 59%

HappyPack 多线程打包（古早方法）

运行在 Node.js 上的 Webpack 是单线程的，HappyPack 能实现 Webpack 多线程打包

HappyPack 把任务分解，让多个子进程并发处理，执行完后再把结果发送给主进程，进而提升打包速度

使用 HappyPack 实现多线程打包

npm install HappyPack -D

在 vue.config.js 中，引入

const HappyPack = require('happypack');
const os = require('os');
// 开辟一个线程池，拿到系统 CPU 的核数，happypack 将编译工作利用所有线程
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  configureWebpack: {
     plugins: [
       new HappyPack({
        id: 'happybabel',
        loaders: ['babel-loader'],
        threadPool: happyThreadPool
      })
     ]
  }
}

验证 HappyPack 多线程打包优化效果

打包速度：8949 ms

使用 HappyPack 后，打包速度进一步提升了 65%

越是复杂的项目，HappyPack 对打包速度的提升越明显

Gzip 压缩

html、js、css 资源，使用 gzip 后，可以将体积压缩 70% 以上

线上项目为了把服务端响应文件的体积尽量减小，优化返回速度，可以通过两种方式：

使用构建工具 Webpack 插件，来开启 http 传输的 gzip 压缩
服务端配置 nginx，来开启 http 传输的 gzip 压缩

使用 compression-webpack-plugin 开启 gzip

npm install compression-webpack-plugin -D

在 vue.config.js 中，添加配置

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

module.exports = {
  configureWebpack: {
     plugins: [
      new CompressionPlugin({
        test: /\.(js|css)(\?.*)?$/i, //需要压缩的文件正则
        threshold: 1024, //文件大小大于这个值时启用压缩
        deleteOriginalAssets: false //压缩后保留原文件
      })
     ]
  }
}