vue项目的缩小答案

【问题标题】：Minification of vue projectvue项目的缩小
【发布时间】：2019-12-18 00:02:09
【问题描述】：

我使用的是 vue: 2.6.10
项目是使用 vue cli 3 https://cli.vuejs.org/guide/ 生成的
这个 vue cli 包含一些如何使用 webpack 4

我想归档项目源的缩小（删除所有空格、换行符等）。所以我想要 20mb 左右的 ~4mb

我的消息来源：

//file name package.json
{
  "name": "abc",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
...
}

我的项目包含：

许多 *.vue 文件包含我构建的组件。
一些 *.js 文件

当我在控制台中输入时：

npm run build

它从上面运行脚本 -> "build": "vue-cli-service build"

一切运行，我最终得到结果：

我有什么：

app.js 文件很重~20mb，我不知道 3.5mb build.min.js 文件在哪里，如何通过这个 vue cli 强制 npm 存档？

也许你知道如何将 vue 应用程序从 ~20mb 减少到 ~3.5mb？

【问题讨论】：

“Gzipped”列表示服务器使用 gzip 压缩发送 dist/app.js 文件时的大小。这不是任何 .min.js 文件的大小。
20+mb 有效载荷？您要导入什么样的库？您是否使用动态导入以便仅在需要时才导入模块？
@Terry I'，像这样导入 vuetify 库： import '@mdi/font/css/materialdesignicons.css' import Vue from 'vue';从 'vuetify/lib' 导入 Vuetify；导入 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify);
@JJJ 好的，但是如何接收这样的 .min.js 文件？
webpack.js.org/guides/production

标签： vue.js npm minify webpack-4 vue-cli-3

【解决方案1】：

我已经意识到我做错了什么：

值得检查 webpack --version（我有一个旧的 sudo apt get install webpack 在 Ubuntu 19.04 上安装了我 3.6.4 版本）
我正在尝试使用包装 webpack 的 vue.config.js，这不是一个好主意，有些东西对我不起作用
最后我为 vue + vuetify 配置了 webpack.config.js，如下所示：

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const TerserPlugin = require('terser-webpack-plugin');
const JavaScriptObfuscator = require('webpack-obfuscator');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname,
        '../monitglass-backend/src/main/resources/static/js/app'),
    publicPath: '/dist/',
    filename: 'app.js'
  },
  plugins: [new VueLoaderPlugin()
    , new VuetifyLoaderPlugin()
    , new TerserPlugin()
    , new JavaScriptObfuscator({
      identifierNamesGenerator: 'mangled'
    })
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {}
          // other vue-loader options go here
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg|ttf|eot|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              fiber: require('fibers'),
              indentedSyntax: true // optional
            }
          }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        },
      }),
    ],
  },
}

所以在一天结束时，我完成了 app.js 3.82 MiB 的缩小和混淆。我希望这篇文章能帮助其他寻求此类答案的人。

【讨论】：