Vue cli3 dll插件及开启gzip压缩优化打包编译慢的问题

本文链接：https://blog.csdn.net/huangwen001/article/details/106603072

当Vue的应用越来越大的时候，就会发现启动和编译越来越慢，非常影响开发效率，并且打包体积也越来越大，于是边寻找了一番解决方案，通过以下两种方式可以稍微缓解一下：

dll剥离第三方库
开启gzip压缩

我们先来看看dll插件
一：在pack.json文件添加dll

{
···
  "scripts": {
    "serve": "xxx xxx xxxx",
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js",
···
  },
···

二：vue.config.js加入dll配置
把第三方库都加入到entry里面

  productionSourceMap: false,
  pluginOptions: {
    dll: {
      entry: ['第三方库1','第三方库2'],
      cacheFilePath: path.resolve(__dirname, './public')
    }
  },

三：预编译
npm run dll(运行一次即可)
运行后便会在public目录下生成dll文件夹以及一个缓存的js文件
后面便可正常启动项目进行开发
博主是从两分三十多秒优化到一分半不到，编译三十秒左右
有大佬能有更好的优化方案能指出，初入vue小白

接下来是开启gzip
一：安装compression-webpack-plugin插件
npm install --save-dev compression-webpack-plugin
二：配置vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const compress = new CompressionWebpackPlugin(
  {
    filename: info => {
      return `${info.path}.gz${info.query}`
    },
    algorithm: 'gzip',
    threshold: 10240,
    test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
    minRatio: 0.8,
    deleteOriginalAssets: false
  }
)

  configureWebpack: {
    plugins: [
      compress,
    ]
  },
  
  chainWebpack: (config) => {
    config.optimization.minimize(true);
    config.optimization.splitChunks({
      chunks: 'all'
    });
  },