webpack性能优化（3）

webpack插件中有一个DllPlugin，它可以打包出一个个单独的动态链接库文件，一个动态链接库可以包含多个模块。那么它为什么可以提高构建速度呢？因为包含大量复用的动态链接库只需编译一次，在之后的构建中被动态链接库包含的模块不会被重新编译，而是直接使用动态链接库的代码。首先新建一个webpack_dll.config.js文件

const path=require('path');
const DllPlugin=require('DllPlugin');
modlue.exports={
    entry:{react:['react-dom','react']},
    output:{
        path:path.resolve(_dirname,'dist'),
        filename:"[name].dll.js",
        library:"_dll_[name]"//存储动态链接库的全局名称
    },
    plugins:[new DllPlugin({
        name:'_dll_[name]',
        path:path.join(_dirname,'dist','[name].manifest.json')
    })]
    }

然后使用webpack打包这个文件，再新建webpack.config.js文件

const path=require('path')
const DllReferencePlugin=require('DllReferencePlugin');

module.exports={
    entry:{main:'./main.js'},
    output:{
        filename:'[name].js',
        path:path.resolve(_dirname,'dist')
    }
    module:{
        rules:[
        {test:/\.js$/,
        use:['babel-loader'],
        exclude:path.resolve(_dirname,'node_modules')
        }
    ]
        },
    plugins:[new DllReferencePlugin({
        mainfest:require('./dist/react.manifest.json')
    })
    ],
    devtool:'source-map'
    }

然后执行构建即可