脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Webpack DLL

详解Webpack DLL用法以及功能

 更新时间：2017年07月11日 16:47:50   作者：clinyong  
本篇文章主要介绍了详解Webpack DLL用法以及功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

再改下 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')
  })
 ]
}

manifest: require('./dist/vendors-manifest.json') 这里的路径要和 webpack.dll.config.js 里面的对应。

然后运行

$ 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>

DLL Link Plugin

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

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

因为上面这些问题，所以基于官方的 DllReferencePlugin，我写了一个打包的插件，Dll Link Plugin。

使用这个插件，只需要对 webpack.config.js 作下小小的改动

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

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

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

$ webpack --config webpack.config.js

上面的命令便会自动生成对应的 vendors 文件，需要更新的时候，也会自动更新。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js最全的数组的降维5种办法(小结)

    js最全的数组的降维5种办法(小结)

    这篇文章主要介绍了js最全的数组的降维5种办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • MockJs结合json-server模拟后台数据

    MockJs结合json-server模拟后台数据

    这篇文章主要为大家详细介绍了MockJs结合json-server模拟后台数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • ES11屡试不爽的新特性,你用上了几个

    ES11屡试不爽的新特性,你用上了几个

    这篇文章主要介绍了ES11屡试不爽的新特性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • Bootstrap每天必学之折叠

    Bootstrap每天必学之折叠

    Bootstrap每天必学之折叠，本文向大家讲解了Bootstrap折叠操作，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 一文搞懂TypeScript的安装、使用、自动编译的教程

    一文搞懂TypeScript的安装、使用、自动编译的教程

    TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是 JavaScript 的超集，最终会被编译为 JavaScript 代码，关于TypeScript的安装、使用、自动编译很多朋友不是很清楚，今天抽空给大家普及下，感兴趣的朋友一起看看吧
    2021-06-06
  • 微信小程序开发之获取用户手机号码(php接口解密)

    微信小程序开发之获取用户手机号码(php接口解密)

    这篇文章主要介绍了微信小程序开发之获取用户手机号码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • js DIV滚动条随机位置的设置技巧

    js DIV滚动条随机位置的设置技巧

    刚才一个朋友告诉我他的blog友情链接太多了，所以把所有链接放到一个DIV中，加了个滚动条，可是他又不想每次别人来看，看到的都是前面几个链接，于是问我有没有什么办法，想了一个，呵呵，正好有个办法
    2008-11-11
  • 小程序实现多选框功能

    小程序实现多选框功能

    这篇文章主要为大家详细介绍了小程序实现多选框功能，小程序实现单选全选多选删除操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • css+html+js实现五角星评分

    css+html+js实现五角星评分

    这篇文章主要为大家详细介绍了css+html+js实现五角星评分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • js如何实现input的赋值

    js如何实现input的赋值

    这篇文章主要介绍了js如何实现input的赋值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论