This time I will bring you a detailed explanation of the optimization steps for using vue-admin-template. What are the precautions for using vue-admin-template optimization? The following is a practical case, let's take a look.
Preface
The company has several projects with backend management systems. In order to facilitate development, we chose the popular backend template in vue. Developed as a basic template. However, when I started using it, the author did not optimize this. When the project went online, I discovered that the packaged files were very large, with just one vendor having a volume of 770k (the picture below is the basic template, everything is No packaged file information is added):
can be analyzed through webpack-bundle-analyzer
. The volume mainly comes from the Ele.me UI ( The volume is 500k), because the split components were not partially introduced, causing webpack to package the entire component library. The second is vue itself, which has a size of 80k.
# Therefore, it is urgent to optimize its packaging.
Optimization
The main purposes of optimization are:
Speed up resource loading and reduce user waiting time and home page white screen time to improve user experience.
Speed up packaging and don’t waste time waiting for packaging.
To solve the first problem, many people will think that resource files can be placed on CDN. Yes, this time we will solve the loading problem through CDN.
CDN - Improve loading speed
More mature frameworks/component libraries like vue and element ui generally have free, high-speed, The public cdn is for developers to use. Since most users are in China, the bootcdn library is used this time. The popular resources of this library are relatively complete, available in various versions, and the domestic access speed is very fast, which is simply good news for developers.
Introduce vue and Ele.me components into index.html
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
Because dependencies are introduced from outside, webpack needs to be informed of the source of dependencies when packaging.
Modifywebpack.base.conf.js
:
1 2 3 4 5 6 7 |
|
Packaging it again can indeed greatly compress the packaging volume, from 700k to 130k:
But then there is a problem:
Obviously I am developing locally, but due to the introduction The online production version of the vue file is removed, so vue-dev-tools cannot be debugged.
Therefore, we need to adjust the webpack configuration again, webpack.base.conf.js
, and the js injected by webpack is always at the end, so we need html-webpack-include-assets-plugin
helps to inject app.js
and then inject the corresponding component library:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
OK. At this time, both packaging and The final size can also be debugged using vue-dev-tool in development mode.
DLL - Improve packaging speed
# Front-ends that often package will find that many times, in order to fix certain bugs (such as promise in ie bug under Safari), and a new polyfill was introduced. However, after packaging, it was found that the hash value of the vendor has changed, and the entire vendor only added a new dependency of es6-promise
, but it cost The price is that the previously packaged vendor needs to be discarded, and when the user revisits, they need to pull a brand new vendor again, which is a bit expensive.
At this time, using dllPlugin packaging has advantages. It can package some basic dependent modules together first. When officially packaging, these modules can be skipped and no longer packaged into the vendor repeatedly. This improves the packaging speed and also reduces the size of the vendor.
如,后台管理系统基础模块基本有以下几个:
axios: ajax 请求。
vuex: 全局状态管理。
js-cookie: 前端处理 cookie
vue-router: 路由管理。
这四个基础模块几乎是必须的,那么可以先提取出来。
step 1 打包基础模块
先在 build
文件夹下新建一个用于打包 dll 的配置文件 webpack.dll.conf.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
|
然后在 package.json
中加入一条命令:
1 2 3 4 5 6 7 |
|
执行 yarn build:dll
或者 npm run build:dll
即可完成打包 dll。执行完成后:
1 2 3 4 5 6 7 8 9 10 11 |
|
同时,可以在 build
目录下,找到各个模块对应关系文件 vendors-manifest.json
和 static/js
下的 vendor.dll.js
。
step 2 页面中引入 vendor
打包后的 dll 文件需要手动在 index.html
引入:
1 2 3 |
|
step 3 告诉 webpack 使用 dllPlugin 进行打包
修改 build/webpack.prod.conf.js
:
1 2 3 4 5 6 7 8 9 10 |
|
再次打包:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
发现 vendor 现在只有 40k 的体积,减少了一半的体积,而且打包速度也快了 2s,而相对于最开始的基础模板,打包速度快了 12s,这是很让人欣慰。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
如何使用v-model与promise两种方式实现vue弹窗组件
怎样使用Vue+Jwt+SpringBoot+Ldap完成登录认证
The above is the detailed content of Detailed explanation of optimization steps using vue-admin-template. For more information, please follow other related articles on the PHP Chinese website!