vue2 打包后总会生成一个超大的js？

Question

vue2 打包后总会生成一个超大的js，里面重复包含了我的整个项目，不知道到底是哪里的配置出了问题？

"use strict";
const path = require("path");
const { title, abbreviation, devPort } = require("./src/config/settings");
const pkg = require("./package.json");
const Webpack = require("webpack");
const WebpackBar = require("webpackbar");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const date = require("dayjs")().format("YYYY_M_D");
const time = require("dayjs")().format("YYYY-M-D HH:mm:ss");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["html", "js", "css", "svg"];
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); //引入插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 
// const HtmlTagsPlugin = require("html-webpack-tags-plugin");
function resolve(dir) {
  return path.join(__dirname, dir);
}

function mockServer() {
  if (process.env.NODE_ENV === "development") {
    const mockServer = require("./mock/mock-server.js");
    return mockServer;
  } else {
    return "";
  }
}

const name = title || "";

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
  }
)

const os = require('os');
// cpu核数
const threads = os.cpus().length;

module.exports = {
  publicPath: process.env.BASE_URL,
  productionSourceMap: false,
  assetsDir: "static",
  outputDir: "dist",
  lintOnSave: false,
  transpileDependencies: ["vue-echarts", "resize-detector"],

  devServer: {
    hot: true,
    port: devPort,
    open: true,
    noInfo: false,
    overlay: {
      warnings: true,
      errors: true,
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy

      [process.env.VUE_APP_BASE_API]: {
        target: "http://localhost:8081/base",
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
        api: {
          target: "http://192.168.2.37:8081/base",
          changeOrigin: true,
          pathRewrite: {
            ["^api"]: "",
          },
        },
      },
    },
    after: mockServer(),
    historyApiFallback: true,
  },

  configureWebpack: {
    plugins: [
      // new SpeedMeasurePlugin(),
      // compress,
      new Webpack.ProvidePlugin({
        "window.Quill": "quill/dist/quill.js",
        Quill: "quill/dist/quill.js",
      }),
      // new Webpack.DllReferencePlugin({
      //   manifest: path.join(__dirname, "public/static/vendor-manifest.json") // manifest文件路径
      // }),
      // new HtmlTagsPlugin({
      //   append: false, // 在生成资源后插入
      //   publicPath: "/", // 使用公共路径
      //   tags: ["public/dll/vendor.dll.js"] // 资源路径
      // })
    ],
    // optimization: {
    //   minimizer: [
    //     new UglifyJsPlugin({
    //       uglifyOptions: {
    //         // 删除注释
    //         output: {
    //           comments: false,
    //         },
    //         // 删除console debugger 删除警告
    //         compress: {
    //           warnings: false,
    //           drop_console: true, //console
    //           drop_debugger: false,
    //           pure_funcs: ["console.log"], //移除console
    //         },
    //       },
    //     }),
    //   ],
    // },
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },

  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach((item) => {
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          // Provide path to the file with resources
          // 要公用的scss的路径
          resources: "src/styles/mixin.scss",
        })
        .end();
    });
    config.when(process.env.NODE_ENV === "production", (config) => {
      config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin)
      config.plugin("SpeedMeasurePlugin").use(SpeedMeasurePlugin)
      config.plugin("compress").use(compress)
    });

    // 多核编译
    config.module
      .rule('vue')
      .use('thread-loader')
      .loader('thread-loader')
      .options({
        workers: threads
      })
      .end();
    config.module
      .rule('js')
      .use('thread-loader')
      .loader('thread-loader')
      .options({
        workers: threads
      })
      .end();
    },

    
    // config.optimization.splitChunks({
    //     cacheGroups:{
    //         common: {//commons 一般是是个人定义的
    //             name: 'chunk-common', // 打包后的文件名
    //             chunks: 'initial',
    //             minChunks: 1,
    //             maxInitialRequests: 5,
    //             minSize: 0,
    //             priority: 1,
    //             reuseExistingChunk: true
    //         },
    //         vendors: {//vendor 是导入的 npm 包
    //             name: 'chunk-vendors',
    //             test: /[\\/]node_modules[\\/]/,
    //             chunks: 'initial',
    //             maxSize: 600000,
    //             maxInitialRequests: 20,
    //             priority: 2,
    //             reuseExistingChunk: true,
    //             enforce: true
    //         },
    //         antDesignVue: {//把antDesignVue从chunk-vendors.js提取出来。当然我们也可以把mixins，vue.min.js等等也按照类似配置提取出来
    //             name: 'chunk-ant-design-vue',
    //             test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
    //             chunks: 'initial',
    //             priority: 3,
    //             maxSize: 600000,
    //             reuseExistingChunk: true,
    //             enforce: true
    //         }
    //     }
    // })

  runtimeCompiler: true,
  css: {
    requireModuleExtension: true,
    sourceMap: true,
    loaderOptions: {
      scss: {
        prependData: '@import "~@/styles/variables.scss";',
      },
    },
  },
};

Answer 1

找到原因了，我使用的模板框架的两行注释掉的代码会不分情况默认注册views下所有页面。

/**
 * @description 渲染路由
 * @param constantRoutes
 * @returns {*}
 */
export function filterRoutes(constantRoutes) {
  return constantRoutes.filter((route) => {
    if (route.component) {
      if (route.component === "Layout") {
        route.component = (resolve) => require(["@/layouts"], resolve);
      } else if (route.component === "EmptyLayout") {
        route.component = (resolve) =>
          require(["@/layouts/EmptyLayout"], resolve);
      } else {
        // const path = "views/" + route.component;
        // route.component = (resolve) => require([`@/${path}`], resolve);
      }
    }
    if (route.children && route.children.length) {
      route.children = filterRoutes(route.children);
    }
    if (route.children && route.children.length === 0) {
      delete route.children;
    }
    return true;
  });
}

Answer 2

没有分包，去搜 splitChunks，路由也使用 lazy-loading 就好了。