分析打包结果及优化公共库打包体积

分析打包结果

由于vue-cli是利用webpack进行打包，我们仅需加入一个webpack插件webpack-bundle-analyzer即可分析打包结果

// vue.config.js

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;
// vue.config.js
module.exports = {
  // 通过 configureWebpack 选项，可对 webpack 进行额外的配置
  // 该配置最终会和 vue-cli 的默认配置进行合并（webpack-merge）
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  },
};

为了避免在开发环境中启动webpack-bundle-analyzer，我们仅需使用以下代码即可
// 新建webpack.config.js

// 导入插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
 // 生产环境
if (process.env.NODE_ENV === "production") {
  module.exports = {
    devtool: "none",
    plugins: [new BundleAnalyzerPlugin()], // 配置插件分析打包结果
    externals: { // 不打包 vue vuex vue-router axios 
      vue: "Vue",
      vuex: "Vuex",
      "vue-router": "VueRouter",
      axios: "axios",
    },
  };
} else {
  module.exports = {};
}

// 新建vue.config.js

// vue-cli的配置文件
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://test.aa-bbb.com",
      },
    },
  },
  configureWebpack: require("./webpack.config"), // 引入配置文件
};

优化公共库打包体积

使用CDN

CDN全称为Content Delivery Network，称之为内容分发网络

它的基本原理是：架设多台服务器，这些服务器定期从源站拿取资源保存本地，到让不同地域的用户能够通过访问最近的服务器获得资源

我们可以把项目中的所有静态资源都放到CDN上（收费），也可以利用现成免费的CDN获取公共库的资源

首先，我们需要告诉webpack不要对公共库进行打包

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: { // 不打包
      vue: "Vue",
      vuex: "Vuex",
      "vue-router": "VueRouter",
    }
  },
};

然后，在页面中手动加入cdn链接，这里使用bootcn

    <!-- ref cdn -->
      <% if(NODE_ENV === "production") { %>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.7/vue-router.min.js"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
      <% } %>
    <!-- built files will be auto injected -->

对于vuex和vue-router，使用这种传统的方式引入的话会自动成为Vue的插件，因此需要去掉Vue.use(xxx)

我们可以使用下面的代码来进行兼容

  // store.js
  import Vue from "vue";
  import Vuex from "vuex";

  if(!window.Vuex){
    // 没有使用传统的方式引入Vuex
    Vue.use(Vuex);
  }

  // router.js
  import VueRouter from "vue-router";
  import Vue from "vue";

  if(!window.VueRouter){
    // 没有使用传统的方式引入VueRouter
    Vue.use(VueRouter);
  }

启用现代模式

为了兼容各种浏览器，vue-cli在内部使用了@babel/present-env对代码进行降级，你可以通过.browserlistrc配置来设置需要兼容的目标浏览器

这是一种比较偷懒的办法，因为对于那些使用现代浏览器的用户，它们也被迫使用了降级之后的代码，而降低的代码中包含了大量的polyfill，从而提升了包的体积

因此，我们希望提供两种打包结果：

1. 降级后的包（大），提供给旧浏览器用户使用
2. 未降级的包（小），提供给现代浏览器用户使用

除了应用webpack进行多次打包外，还可以利用vue-cli给我们提供的命令：

vue-cli-service build --modern

优化项目包体积

这里的项目包是指src目录中的打包结果

页面分包

默认情况下，vue-cli会利用webpack将src目录中的所有代码打包成一个bundle

这样就导致访问一个页面时，需要加载所有页面的js代码

我们可以利用webpack对动态import的支持，从而达到把不同页面的代码打包到不同文件中

// routes
export default [
  {
    name: "Home",
    path: "/",
    component: () => import(/* webpackChunkName: "home" */ "@/views/Home"),
  },
  {
    name: "About",
    path: "/about",
    component: () => import(/* webpackChunkName: "about" */"@/views/About"),
  }
];

优化首屏响应

首页白屏受很多因素的影响

vue页面需要通过js构建，因此在js下载到本地之前，页面上什么也没有

一个非常简单有效的办法，即在页面中先渲染一个小的加载中效果，等到js下载到本地并运行后，即会自动替换

<div id="app">
  <img src="loading.gif" />
</div>