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

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

     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'),

                })

            ]

        }