详解WebpackDLL用法以及功能-创新互联

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

前言

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

1. CommonsChunkPlugin
2. DLLPlugin

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

用法

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

1. webpack.config.js
2. webpack.dll.config.js

先来看下webpack.dll.config.js

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
  vendors: ['react', 'lodash']
 },

 output: {
  filename: '[name].dll.js',
  path: 'dist/',
  library
 },

 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, 'dist/[name]-manifest.json'),
   // This must match the output.library option above
   name: library
  }),
 ],
}

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。