解决Vue3.0项目多次运行后,项目体积增大问题(高达60G)

简介: 解决Vue3.0项目多次运行后,项目体积增大问题(高达60G)

.cache中的compression-webpack-plugin每次增加的空间,正好是整个node_modules增加的空间。  

compression-webpack-plugin
npm i compression-webpack-plugin -D

配置

if (process.env.NODE_ENV ==='production'){
  config.plugin('compressionPlugin')
  .use(new compressionWebpackPlugin({
    // filename: '[path].gz[query]',
    algorithm: 'gzip',
    // test: /.(js|css|txt|html|ico|svg)(?.*)?$/i,
    test:/.(js|css|html|ttf|otf)(?.*)?$/i,
    threshold: 10240,
    minRatio: 0.8,
    deleteOriginalAssets: false
   }));
}
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: process.env.NODE_ENV === 'production' ? [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
        // deleteOriginalAssets: true// 压缩完是否保留原文件
      })
    ] : []
  },
相关文章
|
6月前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
334 59
|
6月前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
189 57
|
4月前
|
Web App开发 存储 JavaScript
揭秘!Vue3.5响应式重构如何让内存占用减少56%
【11月更文挑战第9天】本文揭秘了 Vue3.5 响应式系统的优化,通过精细化的依赖收集、优化数据劫持方式和自动的观察者清理,使得内存占用减少了 56%。文章详细介绍了响应式系统的工作原理和传统内存占用因素,并通过性能测试和实际案例展示了优化效果。
|
7月前
|
资源调度 JavaScript 前端开发
如何大幅减少 Vue.js 中的包大小和加载时间,提升用户体验!
如何大幅减少 Vue.js 中的包大小和加载时间,提升用户体验!
|
10月前
|
缓存 前端开发 算法
前端需要加载一个大体积的文件时,可以这么优化
前端需要加载一个大体积的文件时,可以这么优化
|
10月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
79 1
|
10月前
|
缓存 前端开发 JavaScript
代码如何跑得更快?Vue性能提速指南
代码如何跑得更快?Vue性能提速指南
156 0
代码如何跑得更快?Vue性能提速指南
|
数据采集 JavaScript 前端开发
超越React,JS代码体积减少90%!它为何是2023年最好的Web框架?
超越React,JS代码体积减少90%!它为何是2023年最好的Web框架?
123 0
|
JavaScript 前端开发 搜索推荐
如何优化你的Vue.js应用以获得最佳性能
如何优化你的Vue.js应用以获得最佳性能
118 0
|
JavaScript
降低vue-router版本的两种方法
降低vue-router版本的两种方法
659 2