分析打包的结果

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 2.6k 阅读时长 ≈ 2 分钟
分析使用vue-cli打包后的文件，进行优化

分析打包结果

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

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

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

优化公共库打包体积

使用CDN

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

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

img

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

img

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

1
2
3
4
5
6
7
8
9
10
// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      vue: "Vue",
      vuex: "Vuex",
      "vue-router": "VueRouter",
    }
  },
};

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

1
2
3
4
5
6
7
<body>
  <div id="app"></div>
  <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>
  <!-- built files will be auto injected -->
</body>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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给我们提供的命令：

1
vue-cli-service build --modern

优化项目包体积

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

页面分包

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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下载到本地并运行后，即会自动替换

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