preface

Recently, I participated in the framework construction of a large project, which was based on Vue2.0+VueCli3. This thought has written so long static page, the interface has started docking up, hit a package to see how big. The results really surprised me:

This seems a far cry from my ideal single-digit package size. Open the folder to find the most occupied file. Map file

I searched the Internet for the.map file.

After the project is packaged, the code is compressed and encrypted. If an error occurs during the operation, the output error message cannot be accurately known where the code reported an error. With a map, you can output exactly which lines and columns are wrong, just like unencrypted code. So the file can be removed if the project does not need it.

Remove the.map file

The dist package is much smaller by setting the productionSourceMap property to false in the vue.config.js file.

vue.config.js

module.exports = {
    productionSourceMap:false
}
Copy the code

The transformation from 15Mb to 5Mb has been completed.

Optimize static resource images

After I finished packing, I found that the still images were packed into a folder that took up nearly 1Mb of space.

The view content is also some ordinary pictures.

With such large resources at the beginning of the project, the project can afford to get bigger. And there are many problems in the later maintenance.

Disadvantages of static resource images

1. When the project functions are added in the later stage. Colleague A and colleague B both need to show the same sample diagram. If their functions are not in the same module, they are likely to upload the same images in their own folders. Packaging will result in two identical images, using two memory resources.

2. If the function is modified or deleted in the later stage, will we think of deleting its old pictures (most of them should not be considered)? Of course, we can also periodically check whether there are unused pictures to delete, but this often requires a lot of manpower and resources.

OSS replacement image static resource solution

We can separate static resources from project packaging by uploading static resources to OSS.

Static resources are compressed and managed on OSS so that we don’t care where they are in the file (because of the direct access to the external chain address).

I have analyzed the following advantages of this approach:

  1. Remove static resources from packaging, greatly reducing the volume of packaging. (Can increase the packaging speed and reduce the package upload time to the server).

  2. Resources are CDN accelerated and generally a little faster than putting them directly on the server. (CDN will select the nearest server according to the visitor address for resource transmission)

  3. Easy to maintain, if a function is removed we do not have to worry about static file residue. Because the reference has been removed, the project does not request static resources that are not needed.

  4. Unified management. There are many participants in a project, and the location of files is not uniform (currently, there are static folders, assets folders, and the nearest folder). With unified management, we can easily find our projects, modules, and other resources on OSS.

Configure OSS resources to the development environment

Step 1: We need to upload our resources to the OSS object store.

Copy the resulting image URL path. For information on how to upload OSS, see this article: Start OSS quickly

Step 2: Configure BaseUrl for global OSS. This step is mainly to support the subsequent expansion, if we need to migrate or modify our OSS library, then just modify the OSS BaseUrl.

Configure address substitution for the IMG tag:

main.js

import Vue from 'vue';
// Global variables
Vue.prototype.$OSS = 'https:// your bucket name. oss-cn-hangzhou.aliyuncs.com/ The folder under your bucket '

Copy the code

use

index.vue

<div class="login-logo">
     <img :src="$OSS + '/images/login/logo.png'" alt="logo" />
 </div>
Copy the code

Configure the reference address about the image in the style: base.less

/* OSS address (Less variable) */
@oss: 'https:// your bucket name. oss-cn-hangzhou.aliyuncs.com/ The folder under your bucket ';
Copy the code

use

index.vue

<template>
  <! Page -- -- -- >
  <div id="index-box">
  </div>
</template>

<style lang="less" scoped>
/* Import OSS BaseUrl */
@import '@/assets/styles/base.less';
#index-box {
  background: url('@{oss}/images/admin/login-box.png');
 }
</style>
Copy the code

At this point, we can normally access the uploaded pictures locally

After running the package command, I found that it was much faster than before, and the package was only 4Mb.

Run discovery under nginx is also normal:

This is the end of our optimization of static resources.

expand

Of course, this article is only about optimizing the package size related operations, in the website performance needs to be further optimized.

The following article is recommended, which is very good in project optimization.

Site performance optimization – from 12.67s to 1.06s story

In addition, we recommend a picture compression website, which can optimize the size of our pictures and is free.

tinypng.com/