vue-cli3 uses DllPlugin to achieve precompilation and improve construction speed

There are two goals for project packaging: reduce the size of packaging code and speed up packaging

1. Reduce the packaging volume:

(1) For libraries that are used less, you can remove them (I removed jquery and lodash). If you use them, please refer to the source code and write them yourself.

(2) A large library that is necessary and necessary (I used monaco-edit here), and introduced using cdn method

When the packaging volume is reduced, the natural speed will also be improved.

2. Speed ​​up packaging:

I've done these currently:

(1) Vue-cli2 upgraded to vue-cli3, and webpack2 upgraded to webpack4. The construction speed suddenly increased from about 3 minutes to less than 1 minute (vue-cli3 upgrade processhttps:///article/

(2) Use DllPlugin to precompile, the process is as follows:

·    npm install webpack-cli --save-d

·     I will create a set of webpack configurations independently and use dllPlugin to define the dll file to be packaged; here I create a new one in the root directory. The content is as follows

const path = require("path");
const webpack = require("webpack");
 = {
 entry: {
 vendor: [
  "vue-router/dist/",
  "vuex/dist/",
  "axios"
 ]
 },
 output: {
 path: (__dirname, "public/vendor"),
 filename: "[name].",
 library: "[name]_[hash]" // The global variable name exposed in },
 plugins: [
 new ({
  path: (__dirname, "public/vendor", "[name]-"),
  name: "[name]_[hash]",
  context: ()
 })
 ]
};

Note: In vue-cli3, you must put the generated dll into public or configure it yourselfpublicPath (I fell into a trap if I didn't read the document carefully)

·    The commands that are run

{
···
 "scripts": {
 "serve": "npm link typescript && vue-cli-service serve",
 <strong>"dll": "webpack -p --progress --config ./",</strong>
···
 },
···
} 

·    Run the npm run dll command to generate dll

Load the generated dll file in

<script src="./vendor/"></script>

·    The above has been precompiled and loaded; but do not forget to tell webpack which files have been precompiled when building webpack, so that the build process ignores these precompiled files;

The specific method is to add it to the configuration file

const webpack = require("webpack");
 = {
···
 configureWebpack: {
 plugins: [
  new ({
  context: (),
  manifest: require("./public/vendor/")
  })
 ]
 }
···
} 

Summarize

The above is what the editor introduced to you vue-cli3 using DllPlugin to achieve precompilation and improve construction speed. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!