Vue 如何压缩打包后的文件大小

最近负责一个项目，
功能简单页面不复杂，
但需要运行在类似控制卡的设备上，
且包体积需限制在 200kb 左右。

因界面需与其他产品线 UI 设计保持一致，
为了方便快速高效完成开发任务，
故需使用内部沉淀的 UI 组件库，减少 UI 重复工作，
技术栈是 Vue。

有了 UI 组件库，
开发界面基本就是一把梭，
很快完成了界面开发、联调等工作，
包大小也在预料之中的超过了 200kb，
于是找到了 compression-webpack-plugin 插件，
顺利交付项目。

compression-webpack-plugin 插件可以将代码压缩成 gzip 格式，
启用 gzip 需要服务端和客户端的配合，
服务端需要通过配置 nginx 相关参数，或其他方式配置，
客户端需要服务端设置请求头中的 Accept-Encoding 来标识对压缩的支持，值为 gzip，
浏览器便可按照自己的方式解析展示页面。

Show Code

安装

yarn add compression-webpack-plugin –dev

vue.config.js 配置

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

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件
        threshold: 10240, // 对大于此值的文件进行压缩
        deleteOriginalAssets: true, // 是否删除原始文件资源
        // ...
      }),
    ],
  },
}

更多参数可以参考 compression-webpack-plugin。

有了此配置，可以将项目打包成 gzip 格式文件，是一种不错的前端性能优化策略。