preface

The third party libraries introduced by the project are getting bigger and bigger, and packaging takes longer and longer. In order to have a good development experience (operation and maintenance, testing are always nagging), we decided to make some optimizations for project packaging.

1. Write a webpack. DLL. Config. Js

We’ll create a build folder under node_modules to store our webpack configuration files. The structure of webpack.dll.config.js is not complicated, as shown below

const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: {
    // The package entry 'vendors' will be the [name] part of the generated DLL file name
    vendors: [
      'xlsx'.'axios'.'lodash'.'echarts'.'echarts-liquidfill',]},// filename Specifies the full name of the output file
  //path File output path
  //library The name of the resource to which the output file is exported
  output: {
    filename: '[name].dll.js'.path: path.join(__dirname, '. '),
    library: '[name]_lib'
  },
  //DllPlugin generates a manifest.json file (the name can be anything else)
  //path manifest.json file output path
  // The name field in the name manifest.json file must be the same as the library field above
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'manifest.json'),
      name: '[name]_lib'}),].// In production mode, Webpack will do tree-shaking optimization for JS files by default
  mode:'production'
}

Copy the code

The referenced WebPack plug-in needs to be installed locally. Run CNPM install [email protected] -d.

2. Configure the vue. Config. Js

The addAssetHtmlPlugin plugin, which is used to automatically add our packed DLL static files to the HTML, is introduced as an extra. Run CNPM install add-asset-html-webpack-plugin -d to install the plug-in. And write the following additional sections in the vue.config.js file

 const addAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
 
 module.exports = {
  publicPath:'/'
  configureWebpack: {
    plugins: [new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require('./build/manifest.json')}),new addAssetHtmlPlugin({
        // DLL file location
        filepath: path.resolve(__dirname, './build/vendors.dll.js'),
        // DLL reference path
        publicPath: publicPath,
        // DLL final output directory
        outputPath: publicPath
      })
    ]
  },
 }
Copy the code

DllReferencePlugin is a plugin for the manifest.json file generated by the DllPlugin. Third-party libraries configured in the webpack.dll.config.js file packaging entry are ignored when packaging.

3. The conclusion

DLL dynamic link library configuration is not complex, but start to write up or there will be a lot of harvest, I hope this article can help people in need.