• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 2周前 (11-18) 7次浏览

https://github.com/mrbbot/vue-cli-plugin-webpack-bundle-analyzer

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

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

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').BundleAnalyzerPlugin;
  chainWebpack: (config) => {
    config
      .plugin("webpack-bundle-analyzer")
      .use(BundleAnalyzerPlugin)
      .init(
        (Plugin) =>
          new Plugin({ openAnalyzer: process.env.NODE_ENV !== "development" })
      );
  },

 

 

去除core-js

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

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

或者指定版本

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,
};

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


喜欢 (0)