Configure webpack dllPlugin to improve the packaging speed. It is known that DLL packaging optimization is to extract the dependent third party libraries (‘vue’, ‘vue-router’, ‘AXIos ‘, ‘vant’, ‘moment’) separately. These libraries will no longer be packaged! Because third-party libraries generally don’t change much.

Let’s take a look at vuE-CLI3 to configure the dllPlugin for optimization:

First of all:

To create a new webpack.dll.conf.js file, you need to create a new webpack.dll.conf.js file.

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const dllPath = 'public/vendor';

module.exports = {
  entry: {
    vendor: ['vue'.'vue-router'.'axios'.'vant'.'moment']},output: {
    path: path.resolve(__dirname, dllPath),
    filename: '[name].dll.js'.// vendor.dll. Js exposes the global variable name
    // Keep the same name as webpack.dllPlugin
    library: '[name]_[hash]' ** This must be the same as the next **
  },
  plugins: [
    // Clear the previous DLL file
    new CleanWebpackPlugin(),
    // manifest.json describes what the dynamic link library contains
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // keep the same name as output.library
      name: '[name]_[hash]'.// ** this must be the same as the previous **
      context: process.cwd()
    })
  ]
};
Copy the code

And then:

Add the following command to package.json:

"scripts": {..."dll": "webpack -p --progress --config ./webpack.dll.conf.js"
}
Copy the code

After the YARN Run DLL is run, a vendor folder is added to the public folder, which contains vendor.dll.js and vendor-manifest.json files.

The following:

Because vuE-cli3 has embedded the configuration file… But you can add a vue.config.js file to the root directory, and then you can configure the package file! NPM install -d add-asset-html-webpack-plugin NPM install -d add-asset-html-webpack-plugin

const webpack = require('webpack');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const path = require('path');
// This code is DLL optimized code
const dllReference = (config) = > {
  config.plugin('vendorDll')
    .use(webpack.DllReferencePlugin, [{
      context: __dirname,
      manifest: require('./public/vendor/vendor-manifest.json')}]);// This is a reference to the relevant file in the HTML template
  config.plugin('addAssetHtml')
    .use(AddAssetHtmlPlugin, [
      [
        {
          filepath: require.resolve(path.resolve(__dirname, 'public/vendor/vendor.dll.js')),
          outputPath: 'vendor'.publicPath: 'vendor'
        }
      ]
    ])
    .after('html')};module.exports = {
  chainWebpack: (config) = > {
    if (process.env.NODE_ENV === 'production') { // Only the production environment needs it
      dllReference(config)
    }
  }
};
Copy the code

In this case, run yarn build

These files will be generated in the package directory, vendor.dll. Js is the extracted public library file!