配置只第一次加载需要引入的第三方包 提升打包性能


 配置只第一次加载需要引入的第三方包 提升打包性能
     npm install add-asset-html-webpack-plugin --save      const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')

     // 使用 fs 循环插入多个配置文件包名     const fs = require('fs')     const plugins = [         new htmlWebpackPligin({             template:`./src/index.html`         }),         new cleanWebpackPligin(['dist'],{             root: path.resolve(__dirname,'../')         }),     ]
    const files = fs.readdirSync(path.resolve(__dirname,'../dll'))
    files.forEach(file=>{         if(/.*\.dll.js/.test(file)){             plugins.push(new addAssetHtmlWebpackPlugin({             filepath:path.resolve(__dirname,'../dll/',file)             }))           }
        if(/.*\.manifest.json/.test(file)){             plugins.push(new webpack.DllReferencePlugin({                 manifest: path.resolve(__dirname,'../dll/',file)             }))         }     })
    plugins,     //  plugins:[                 //    new addAssetHtmlWebpackPlugin({     //         filepath:path.resolve(__dirname,'../dll/verdors.dll.js')     //     }),     //     new webpack.DllReferencePlugin({     //         manifest: path.resolve(__dirname,'../dll/verdors.manifest.json')     //     })         // 配置两个         // new addAssetHtmlWebpackPlugin({         //     filepath:path.resolve(__dirname,'../dll/react.dll.js')         // }),         // new webpack.DllReferencePlugin({         //     manifest: path.resolve(__dirname,'../dll/react.manifest.json')         // })     //  ],
    创建目录 webpack.dll.js         const path = require('path')         const webpack = require('webpack')         module.exports = {             mode:"production",             entry: {                 // 第三方的 加载包                 verdors:['react','react-dom','lodash']
                // 第三方的 加载包 配置多个的情况                 // verdors:['lodash'],                 // react:['react','react-dom']             },             output:{             filename:"[name].dll.js",             path: path.resolve(__dirname,'../dll'),             library:"[name]"             },             plugins:[                 new webpack.DllPlugin({                     name:"[name]",                     path: path.resolve(__dirname,'../dll/[name].manifest.json'),                 })             ]         }