vue cli 为已有项目添加PWA和打包分析, 去除core-js

原文链接: vue cli 为已有项目添加PWA和打包分析, 去除core-js

https://github.com/webpack-contrib/webpack-bundle-analyzer

pwa

yarn add @vue/cli-plugin-pwa

在main.js中引入registerServiceWorker.js

/* eslint-disable no-console */

import { register } from "register-service-worker"

if (process.env.NODE_ENV === "production") {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        "App is being served from cache by a service worker.\n" +
          "For more details, visit https://goo.gl/AFskqB",
      )
    },
    registered() {
      console.log("Service worker has been registered.")
    },
    cached() {
      console.log("Content has been cached for offline use.")
    },
    updatefound() {
      console.log("New content is downloading.")
    },
    updated() {
      console.log("New content is available; please refresh.")
    },
    offline() {
      console.log(
        "No internet connection found. App is running in offline mode.",
      )
    },
    error(error) {
      console.error("Error during service worker registration:", error)
    },
  })
}

vue.config.js 配置相关内容

 pwa: {
    // GenerateSW
    workboxPluginMode: "GenerateSW",
    workboxOptions: {
      navigateFallback: "/index.html",
      runtimeCaching: [
        {
          urlPattern: new RegExp("^http"),
          handler: "NetworkFirst",
          options: {
            networkTimeoutSeconds: 20,
            cacheName: "api-cache-v1",
            cacheableResponse: {
              statuses: [0, 200],
            },
          },
        },
      ],
    },
  },

打包分析

yarn add  webpack-bundle-analyzer
vue add webpack-bundle-analyzer

vue.config.js

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

    "vis": "set vis=true && yarn build",


  chainWebpack: (config) => {
    process.env.vis &&
      config
        .plugin("webpack-bundle-analyzer")
        .use(BundleAnalyzerPlugin)
        .init((Plugin) => new Plugin());
  },

去除core-js

最简单的方法直接去除vue的preset, 基本上能少100k....

或者指定版本

const plugins = [
  [
    "component",
    {
      libraryName: "element-ui",
      styleLibraryName: "theme-chalk",
    },
  ],
  "@babel/plugin-proposal-optional-chaining",
];
if (process.env.NODE_ENV === "production") {
  plugins.push("transform-remove-console");
}

module.exports = {
  presets: [
    [
      "@vue/cli-plugin-babel/preset",
      {
        useBuiltIns: false,
        targets: {
          ios: "13",
          android: "80",
          chrome: "80",
        },
      },
    ],
  ],  plugins,
};