After the project is developed, we need to package the project and optimize it

Package: Use webpack to do the package (.vue,.js,.less ———–>.js,.css,.html) in the project will provide commands: NPM run build this command is not absolute, you can set it yourself if it is secondary development, be sure to go to this file to see what your command looks like

If the command name is similar, take a look at the suffix and select it based on the environment variable configured Packaging optimization: Keep our files as small as possible and make our pages appear faster while keeping the functionality available

After packaging, you get dist directory. If you want to double-click to open index.html, you need to configure it in vue.config.js in advance: vue.config.js

Package optimization – Route lazy loading

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. Before lazy loading, our normal routing configuration would look like this

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

But there’s a big downside to this, and that’s a huge waste of performance, because it’s going to load whether you use it or not

So we recommend using lazy loading:

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

Speaking of lazy loading, naturally want to mention a mouth route lazy loading magic notes

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

We can specify the name of a file, so that all the JS in the corresponding component are packaged together to form a JS file with that name, rather than a messy js file with a filename

2. Package optimization – Package size analysis (provide direction for next optimization)

We integrate functionality, write a lot of components, and end up packing them into a bunch of files (there will be a lot of.js files in the js directory). How big is each package?

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 entry **main.js** to figure out the size of each package for easy observation and optimization

After executing this command, we should see output from the console similar to the following

Visit the url on this page and you’ll find several packages

As shown in the figure, the larger the block, the larger the file occupies, the larger the file, the higher the requirements for network bandwidth and access speed, which is the direction of our optimization, we can think about these packages, which parts can be optimized.

Package optimization – Remove console.log

During the development of the project,console.log printing was essential, but after the project was launched, such printing would affect the volume of the packaged project, cause data leakage to a certain extent, and the user experience was not very good, so we needed to optimize it before launching

This is an easy step. We just need to configure it in vue.config.js:

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

So that we can package out of the online project will not have a printable output