web前端调用dll_详解Webpack DLL用法以及功能_百厌_前端开发者

在使用webpack过程中，本人也发现发现构建速度非常慢，Webpack性能优化的方式有很多种，本文介绍了dll，dll是一种最简单粗暴并且极其有效的优化方式。

前言

在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，我们希望能和自己的代码分离开，Webpack 社区有两种方案

CommonsChunkPlugin

DLLPlugin

对于 CommonsChunkPlugin，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而DLLPlugin则是能把第三方代码完全分离开，即每次只打包项目自身的代码。

用法

要使用 DLLPlugin，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件

webpack.config.

webpack.dll.config.

先来看下webpack.dll.config.

const webpack = require('webpack')

const library = '[name]_lib'

const path = require('path')

module.exports = {

entry: {

vendors: ['react', 'lodash']

},

output: {

filename: '[name]