When the VUE project is packaged, you get the Dist directory with the three files you need to upload to the server

If you want to double-click to open index.html, you need to configure it in vue.config.js in advance

1.  {
1.    publicPath: './'
1.  }
Copy the code

Package optimization – Route lazy loading

1.  {
1.   path: '/login',
1.   component: () => import('@/views/login/index'),
1.   hidden: true
1.  },
Copy the code

A route to a component represents a page. Lazy loading means that the component’s resources are loaded only when the route enters the page.

You can name this file manually by specifying webpackChunkName in the comment. Here is an example.

components = () => import(/* webpackChunkName:"login"*/ ".. /component/Login.vue");Copy the code
  • Before loading: all the components corresponding to the page are packed into a.js file
  • Set after route lazy loading: the components of the page are packaged into a separate.js file and loaded only after entering the route page.

Package optimization – Package size analysis

Perform package size analysis on developed applications

We can use vue-CLI’s own performance analysis tool to package and analyze all the features we developed, which is very simple to use

npm run preview -- --report
Copy the code

This command will do dependency analysis from our main.js entry, and analyze the size of each package for our observation and optimization. After executing this command, we will see output similar to the following in the console

Package optimization – Remove console-log

In vue.config.js, configure:

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}
Copy the code

Do we need to package all third party libraries into our own project?

Don’t need to! We can import these packages from the network

Webpack configuration Exclude package – Package thin By configuring vue-CLI to exclude some packages that are not normally needed from the package file.

For example: Let WebPack not pack vue XLSX and Element

Find vue.config.js and add externals as follows:

ConfigureWebpack: {// configureWebpack the title of the page for the single-page application // omit the other.... Externals: {/** * Externals object attribute parsing. Basic format: * * 'package' : 'is introduced in the project of the name' * * / 'vue' : 'vue', 'element - the UI:' ElementUI ', 'XLSX' : 'XLSX'},}Copy the code

Webpack configuration excludes packaging – reference network resources to do related configuration: use public network resources to import the package in index.html

Note that file resources can still be pulled from the local node_modules during project development, and only external resources need to be used once the project is online. At this point we can use environment variables to differentiate. Details are as follows:

In the vue.config.js file:

let externals = {} let cdn = { css: [], js: []} const isProduction = process.env.node_env === 'production' if (isProduction) {externals = {/** * Externals object attribute parsing: * 'package name ':' Name introduced in the project '*/ 'vue': 'vue',' element-UI ': 'Element ', 'XLSX' : 'XLSX'} CDN = {CSS: [' https://unpkg.com/element-ui/lib/theme-chalk/index.css '/ / element - the UI CSS stylesheet], js: [ // vue must at first! 'https://unpkg.com/[email protected]/dist/vue.js', / / vuejs' https://unpkg.com/element-ui/lib/index.js', / / element - UI js' https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', / / XLSX]}}Copy the code

Webpack Configure the externals configuration item

ConfigureWebpack: {// Name: name, + externals: externals, resolve: {alias: {'@': resolve(' SRC ')}}Copy the code

Inject the CDN configuration into the HTML template

In vue.config.js, set

chainWebpack(config) { config.plugin('preload').tap(() => [ { rel: 'preload', fileBlacklist: [/ \. Map $/, / hot - update \. Js $/, / runtime \.. * \. $/ js], include: 'initial'}) / / omit the other... Plugin (' HTML ').tap(args => {args[0].cdn = CDN // Configure CDN to plug-in return args}) // omit other... }Copy the code

Go to public/index.html and configure CDN Config to inject CSS and JS in sequence.

Modify head as follows:

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= webpackConfig.name %></title> <! - introduction of style - > + < % for (var CSS of htmlWebpackPlugin. Options. The CDN. CSS) {% > + < link rel = "stylesheet" href = "% > < % = CSS" > + < %} % > <! - the introduction of JS - > + < % for (var JS of htmlWebpackPlugin. Options. The CDN. JS) {% > + < script SRC = "< % = JS % >" > < / script > + < %} % > </head>Copy the code