Vue打包优化实践结果记录

一直想整理一下，关于Vue优化部分的内容。这两天稍稍根据项目配置，做了实践，部分结果不尽人意。

1. 代码层面

1.1 关于路由vue-router懒加载【实际情况变大了】

子组件的加载可以用直接加载的形式； 也可以用import的形式按需加载：

直接加载：  component: './views/mine/home'
懒加载 ： component: () => import('./views/product/home')

效果就是，打包后出来的文件，会按照import的个数，实现多个js文件。

测试：

改成 路由懒加载之后，打包出来的文件是这样的：

是的，变大了。

1.2 CDN形式引入第三方包。
在main.js中的import可以去掉后，就不会打包到vendor文件里。
去掉echarts前：

去掉echarts后：

由于需要额外在index.html引入cdn资源，其实在业务层面没有什么优化的余地。
不如把有echarts的页面弄成其他入口，做多入口配置。降低不需要echarts的页面的资源大小（实际情况确实是echarts对应页面隐藏毕竟深，可以考虑这个方案）

1.3 组件按需引入，比如elementUI，全部加载和部分加载。
本项目内全部替换后，理论上从全部组件变成三个组件，但，打包没有变化。
全局的代码修改：

实际打包结果无变化。

2. 配置层面

2.1 sourceMap
会多出.map文件，而map文件确实很大。对生产环境不友好，关闭是合理的。

2.2 Gzip 开启
Vue3依赖的webpack默认开着Gzip（productionGzip: true）。
但如果把Gzip算法换成brotli算法，可以再进一步压缩。

const CompressionPlugin = require("compression-webpack-plugin");
...测试配置...
new CompressionPlugin({
  filename: "[path].gz[query]",
  algorithm: "brotliCompress",
  test:  /\.js$|\.css$|\.html$/,
  threshold: 100,
  // minRatio: 0.8,
  // deleteOriginalAssets: true
})

截图1： 不配置任何操作直接打包

截图2：配置了CompressionPlugin，其中参数algorithm:Gzip (或者不配，默认就是Gzip）
可以看到.gz的大小确实小了一圈。

左侧是没配直接打包，右侧是配了默认Gzip，大小是一致的。

截图3: 算法效果比对： 默认Gzip算法 Vs brotli算法 , 实际结果可以再减少约18% 。

END