Objective: To analyze the performance of developed applications and the application of CDN

Performance analysis

We integrate features, we write a lot of components, we end up in a bunch of files, so how does it perform in the real world?

We can use vue-CLI’s own performance analysis tools to package and analyze all the features we developed

$ npm run preview -- --report
Copy the code

This command will do a dependency analysis from our main.js entry to get the largest package available for observation and optimization

After executing this command, we should see the following page

As shown in the figure, the larger the square is, the larger the file occupies, and the larger the file, the higher the requirement for network bandwidth and access speed, which is the direction of our optimization

So in this case, how do we optimize

Webpack excludes packaging

CDN is a better way

Isn’t the file big? We don’t need to package these large files and those small files together, such as XLSX, Element plug-ins with full functions, we can put them on the CDN server, on the one hand, reduce the size of the overall package, and on the other hand, the CDN acceleration service can speed up our access to the plug-in

Go to vue.config.js and add externals so that webPack doesn’t pack XLSX and Element

vue.config.js


 // Exclude elementUI XLSX and vue
 // Configure to exclude the packet name
 // key(exclude registration): value(actually the global variable name of the imported package)
 // The CDN file contains the global variable name of element-UI.
 // externals will first exclude the defined package name and will be replaced with a variable
 // It is then imported via CND, but injected into the template with chainWebpack
  externals:
      {
        'vue': 'Vue'.'element-ui': 'ELEMENT'.'xlsx': 'XLSX'
     }
Copy the code

Running again, we see that the package size has been greatly reduced

CDN file configuration

But what about the modules that are not packaged?

CDN can be used in the page template in advance

vue.config.js

const cdn = {
  css: [
    // element-ui css
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css' / / the style sheet].js: [
    // vue must at first!
    'https://unpkg.com/vue/dist/vue.js'.// vuejs
    // element-ui js
    'https://unpkg.com/element-ui/lib/index.js'.// elementUI
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js'.'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js']}Copy the code

However, please note that this configuration actually takes effect for both the development environment and the production environment. In the development environment, there is no need to use THE CDN. In this case, we can use environment variables to distinguish

let cdn = { css: [].js: []}// Use environment variables to distinguish whether to use CDN
const isProd = process.env.NODE_ENV === 'production' // Check whether it is a production environment
let externals = {}
if (isProd) {
  // If it is a production environment, it excludes packaging otherwise it does not exclude
  externals = {
    // key(package name)/value(this value is the name of the global object in the package that needs to be fetched in the CDN)
    'vue': 'Vue'.// The following name should be the global object name in JS
    'element-ui': 'ELEMENT'.// are defined globally in js
    'xlsx': 'XLSX' // are defined globally in js
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // Early introduction of elementUI styles].// Place the CSS file directory
    js: [
      'https://unpkg.com/vue/dist/vue.js'.// vuejs
      'https://unpkg.com/element-ui/lib/index.js'.// element
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js'./ / XLSX related
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js' / / XLSX related
    ] // Place the js file directory}}Copy the code

Inject the CDN file into the template

This is then injected into index.html via the html-webpack-plugin:

config.plugin('html').tap(args= > {
  args[0].cdn = cdn
  return args
})
Copy the code

Find public/index. HTML. Inject CSS and JS via your Config CDN

<head>
  <! -- Introducing styles -->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>">The < %} % ></head>

<! JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>The < %} % >Copy the code

Own personal study notes, only for reference!

If there is infringement, please contact delete