The vendor generated after the introduction of element-UI in Vue is very large, which leads to the slow loading of the page on the first visit. I have searched some methods on the Internet, and there are roughly several ways to solve the problem

  • cdn
  • gzip
  • Vue routes are loaded lazily
  • Element-ui is introduced on demand

cdn

The method of using THE CDN is referenced in index. HTML, but I have tried, I don’t know if I have got it right. After following the operation on the Internet, the package is smaller, but the element-UI is not introduced, it seems that BECAUSE I only introduced the CDN of element-UI, VUE still uses the packaging method. I think it is better to introduce Vue in the way of packaging. In addition, IN this way, I think the expansion and security can not be guaranteed, and it is too troublesome to record the website to get CDN, so I abandoned it.

gzip

Using Gzip, which requires the support of the back-end server, can generate.gz files at package time, requires a bit of configuration, first installing the plug-in

npm i install compression-webpack-plugin -D
Copy the code

Then add the content to vue.config.js

const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/i;
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// contents of ----module.exports ------
configureWebpack: config= > {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new CompressionWebpackPlugin({
                        filename: '[path].gz[query]'.algorithm: 'gzip'.test: productionGzipExtensions,
                        threshold: 2048.minRatio: 0.8})]}}},Copy the code

Gz file (dist). Gz file (dist). Gz file (dist)

Then add gzip_static on to nginx to map the location of static files

location / {
    try_files $uri $uri/ /index.html;
    root   html/;
    index  index.html index.htm;
    gzip_static on;
}
Copy the code

If you open the browser at this point, you will find that the package pulled down is the compressed size of the first access, and the response request header has an extra content-encoding: gzip, which is significantly faster

Vue routes are loaded lazily

This can refer to the official Vue documentation, written in detail: portal

It’s basically changing the import to dynamic import

import Frame from './page/Frame'
const routes = [{
        path: '/talk-frame'.name: 'Frame'.component: Frame
}]
Copy the code

into

const routes = [{
        path: '/talk-frame'.name: 'Frame'.component: (a)= > import( /* webpackChunkName: "base" */'./page/Frame')}]Copy the code

Element-ui is introduced on demand

See the official element-UI introduction: Portals

But I thought it was a hassle, so I didn’t do it >_>

Write in the last

In the end, I only used Gzip and route lazy loading, because my page is very simple, it is also a practice project of my own, after using Gzip has been very fast (7s, now 2s),

I am also a new entry into the front end of the door (maybe not even the entrance) background ape, for the previous section of engineering and optimization of the way do not understand, recently also just learned ES6 and VUE, so if there is something wrong, welcome to criticize, in addition, what other optimization methods also please don’t hesitate to advise

A WebPack analysis tool was also found during the search,

npm install --save-dev webpack-bundle-analyzer
Copy the code

Configure vue.config.js after installation (see appendix)

Executing NPM run build –report automatically opens a web page

Can use reference here: www.npmjs.com/package/web…

The appendix

Complete configuration

const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/i;
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
    // The production environment does not generate sourceMap files
    productionSourceMap:false.// runtimeCompiler: true
    configureWebpack: config= > {
        // NPM run build will change NODE_ENV to production
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new CompressionWebpackPlugin({
                        filename: '[path].gz[query]'.algorithm: 'gzip'.test: productionGzipExtensions,
                        threshold: 2048.minRatio: 0.8})]}}},/ / webpack - bundle - analyzer configuration
    chainWebpack: (config) = > {
        if (process.env.NODE_ENV === 'production') {
            if (process.env.npm_config_report) {
                config.plugin('webpack-bundle-analyzer')
                    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                    .end();
                config.plugins.delete('prefetch')}}}}Copy the code

reference

  1. Gzip:blog.csdn.net/choujiaobm0…
  2. CDN pattern introduction: www.pianshen.com/article/966…
  3. The first screen optimization: mp.weixin.qq.com/s/O4EVlKnYK…