Because the project is huge and many third-party plug-in libraries are used, the construction speed is very slow. Therefore, dllPlugin in Webpack is used to extract third-party libraries and directly create webpack.config.dll. Js to configure

const path = require(‘path’)

const webpack = require(‘webpack’)

const CleanWebpackPlugin = require(‘clean-webpack-plugin’)

// DLL file directory const dllPath = ‘public/vendor’

module.exports = {

entry: {

Vendor: [' handsonTable ', 'codemirror', 'chart.js', 'vUE -grid-layout', 'elliptic', 'element-ui']Copy the code

},

output: {

path: path.join(__dirname, dllPath), filename: Library: '[name]_[hash]' library: '[name]_[hash]', // vendor.dll.Copy the code

},

plugins: [

New CleanWebpackPlugin(['*.*'], {root: Path.join (__dirname, dllPath)}), // Set the environment variable new webpack.defineplugin ({'process.env': {NODE_ENV: 'production'}}), // manifest.json describes what the dynamic link library contains new webpack.dllPlugin ({path: Path. join(__dirname, dllPath, '[name]-manifest.json'), // Keep the same as the name in output.library process.cwd() })Copy the code

]}

In the package.json file

scripts: {

// Add configuration

“build:dll”: “webpack –config ./webpack.config.dll.js –mode production”

}

Running the NPM run build: DLL command generates the vendor.dll.js and vendor-manifest.json files configured for exit

The vue. Config. Js

new webpack.DllReferencePlugin({

      context: process.cwd(),
      manifest: require('./public/vendor/vendor-manifest.json')
      
    })
Copy the code

Configuration is now enough to speed up your build. I’m just recording my configuration steps. If I fail, I’ll start slowly. Ha ha!

  1. Dllplugin affects the inability to use the Tooltip solution

Then there’s the issue that elite-UI tooltip and table show-overflow-tooltip don’t work in packaged test environments or formal environments. Simply remove the ‘element-UI’ library from the vendor array in the entry entry of the webpack.config.dlL. js file, and then NPM run build: DLL regenerates the dlL. js file and the manifest.json file. Then just pack and deploy! If there are other methods welcome to leave a message!