Vue项目打包后js文件压缩

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目打包后js文件压缩相关的知识,希望对你有一定的参考价值。

参考技术A

这段时间因为免费试用了 https://free.aliyun.com/ 一台阿里云的服务器,配置是 2核4G 2M,
因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加载的 js 过大而引起的。因此本文将主要讲解Vue项目打包后js、css、svg等文件过大的解决办法。

通过引入 compression-webpack-plugin 插件来打包,然后开启 nginx gzip 来解决问题

配置 compression-webpack-plugin 前后打包对比,我们查看 dist目录,能够发现大于10KB的 js css 等文件已经被压缩了

vue.js - 解决vue-cli打包后自动压缩代码

当我们用vue脚手架做完项目后,npm run build打包之后,

有没有查看源码,全是压缩好的。但是我就不想让它压缩,该怎么办呢?

困惑了几天,查了各种资料。终于终于...

来,上干货:

首先,我们得了解一点点webpack的知识。

webpack中压缩js 的插件叫 uglifyjs-webpack-plugin,

压缩css 的插件叫 optimize-css-assets-webpack-plugin

然后我们找到/build/webpack.prod.conf.js 文件,

然后你会发现:

const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘)
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)

然后我们就可以在页面中搜索OptimizeCSSPlugin 和 UglifyJsPlugin 这两个关键词所在的地方

配置如下:

    // css 压缩代码,将下面代码注释掉
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
   // 压缩js代码,将下面代码注释掉
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

只要将上面代码注释掉,npm run build 你就会发现,欧了。

然后是html 了,

配置如下:

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === ‘testing‘
        ? ‘index.html‘
        : config.build.index,
      template: ‘index.html‘,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },

这里我们将上面的 minify 改成 minify:false

是的,就可以了。

以上是关于Vue项目打包后js文件压缩的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目打包后js文件压缩

vue-cli3 打包优化

vue打包时gzip压缩的两种方案

vue 项目打包后没有生成config/index.js文件?

vue.js - 解决vue-cli打包后自动压缩代码

聊聊 webpack 打包如何压缩包文件大小