Blog Move ✌

@TOC

Saturday PM sunny and a little sleepy

Efficient optimization for slow loading of vuE-CLI project home page

1. Reasons affecting the loading speed

At the beginning I want to throw this pot to the network speed, but I found that some big mall projects (Taobao, JINGdong), in the case of general network speed, the loading speed is still very fast, ah, the network speed is not back this pot or find the reason for the project, the loading time is 4.5s

2. Analyze the cause of large files

Analyze project dependencies using the Webpack-Bundle-Analyzer

Plugin use:

// Build --> webpack.prod.conf.js
// Add the following configuration
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; . plugins: [ ... new BundleAnalyzerPlugin(), ... ]Copy the code

After adding the above code, run the package command NPM run build, which will automatically pop up 127.0.0.1:8888 if the package is successful, as shown below, you will see many small blocks, each of which corresponds to each module, and the larger the small blocks, the larger the file

See vendor.js? Is it clear to see what is in it and realize, yes, it is the dependency of the application in our project

vendor.js
Dependencies (third-party libraries)

3. Project dependency optimization

After eliminating the existence of == idle dependency package ==, it is necessary to optimize the steel dependency

3.1 CDN acceleration based on optimization

CDN acceleration as ThinkerK understands: separate your own source code from the third-party library code, reduce the project size, and use other people’s servers to request third-party libraries to reduce the pressure on your own server

CDN acceleration is selected for some steel with relatively large volume (take ECharts for example).

  1. inindex.htmlCDN introduces third party dependencies in files 
    //index.html
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
Copy the code
  2. Configure Webpack to separate echartsWebpack /externals details. 
    // Build --> webpack.base.conf.js

module.exports = {
     externals: { // Libraries inside externals will not be packaged by Webpack
   	    echarts: 'echarts',}}Copy the code
  3. Where you need to use dependencies you can import them,

When NPM run builds again, echarts will not be packaged and vendor.js will be reduced in size

3.2 Rely on optimized Webpack dllPlugin

In fact, webpack. DLL is more of the optimization of webpack packaging speed, the effect of optimizing the home page loading speed is not obvious, so I only mention it here. Take a look if you’re interestedUse of the Webpack dllPlugin

4. Gzip violent compression

Gzip has strong compression capability, up to 70% compression strength

Nginx enables gzip mode

server { listen 8103; server_name ************; Enable gzip gzip on; The type of file to compress. gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; Gzip_vary on is recommended for HTTP header Vary: accept-encoding. }Copy the code

Vue open gzip

  1. Install compression will – webpack – the plugin 
     npm i compression-webpack-plugin@1.112. --save-dev
Copy the code

    Notice the version here@ 1.1.12If you do not add the version number innpm run buildYou get an error becausecompressionThe latest version followswebpackVersion mismatch

  2. Configuring gzip 
    // file path config --> index.js
 build: {
    // Gzip off by default as many popular static hosts such as
   	// Surge or Netlify already gzip all static assets for you.
   	// Before setting to `true`, make sure to:
   	// npm install --save-dev compression-webpack-plugin
   	productionGzip: true.// Change from false to true
   	productionGzipExtensions: ['js'.'css'],}Copy the code

Package effect after configuration

You can see gzip on your browser

The optimized effect is faster than before 4s more experience on the up