当前位置：首页 > 资讯 > 技术文档

详解Webpack DLL用法以及功能

时间：2021-08-20 20:06 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解Webpack DLL用法以及功能

在使用webpack过程中，本人也发现发现构建速度非常慢，Webpack性能优化的方式有很多种，本文介绍了dll，dll是一种最简单粗暴并且极其有效的优化方式。 [b]前言[/b] 在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 [code]react[/code]，[code]lodash[/code]，我们希望能和自己的代码分离开，Webpack 社区有两种方案 [list=1] [*]CommonsChunkPlugin[/*] [*]DLLPlugin[/*] [/list] 对于 [code]CommonsChunkPlugin[/code]，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而[code]DLLPlugin [/code]则是能把第三方代码完全分离开，即每次只打包项目自身的代码。 [b]用法[/b] 要使用 [code]DLLPlugin[/code]，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件 [list=1] [*]webpack.config.js[/*] [*]webpack.dll.config.js[/*] [/list] 先来看下[code] webpack.dll.config.js[/code]

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
  }),
 ],
}

再改下 webpack.config.js 文件

const webpack = require('webpack')

module.exports = {
 entry: {
  app: './src/index'
 },
 output: {
  filename: 'app.bundle.js',
  path: 'dist/',
 },
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./dist/vendors-manifest.json')
  })
 ]
}

[code]manifest: require('./dist/vendors-manifest.json') [/code]这里的路径要和[code] webpack.dll.config.js [/code]里面的对应。然后运行

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

然后你的 html 文件像下面这样引用

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

[b]DLL Link Plugin[/b] 上面的用法也存在一些不方便的地方，比如在[code] webpack.config.js[/code] 中要明确指出对应的 [code]manifest.json [/code]文件。还有当 DLL 需要更新的时候，比如[code] react [/code]升级了，或者加入新的第三方库，都需要手动像下面这样编译一次。

$ webpack --config webpack.dll.config.js

因为上面这些问题，所以基于官方的 DllReferencePlugin，我写了一个打包的插件，[url=https://github.com/clinyong/dll-link-webpack-plugin]Dll Link Plugin[/url]。使用这个插件，只需要对[code] webpack.config.js [/code]作下小小的改动

const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')

module.exports = {
 // ...
 plugins: [
  new DllLinkPlugin({
   config: require('webpack.dll.config.js')
  })
 ]
}

直接替换掉[code] DllReferencePlugin[/code]，然后传入对应的 DLL 配置文件就可以了。每次打包的时候，只需要运行

$ webpack --config webpack.config.js

上面的命令便会自动生成对应的 vendors 文件，需要更新的时候，也会自动更新。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：js校验表单后提交表单的三种方法总结
下一篇：React创建组件的三种方式及其区别

资讯排行榜
更多>>