(转)使用webpack.DllPlugin与webpack.DllReferencePlugin解决webpack打包慢问题

解决webpack打包速度太慢
使用webpack插件webpack.DllPlugin与webpack.DllReferencePlugin将不需要改动的第三方插件与自己的业务代码进行分开打包,
首先:
在项目根目录新建一个文件webpack.dll.config.js

const path    = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
      vendor: ['vue-router','vuex','vue/dist/vue.common.js','vue/dist/vue.js','vue-loader/lib/component-normalizer.js','vue']
  },
  output: {
    path: path.resolve(base.path),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve('./dist', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
};

将是用到的第三方插件添加到vendor中
然后:在webpack.config.js中添加代码

plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dist/vendor-manifest.json')
    })
  ]

还需要在入口html文件中引入vendor.dll.js

<script type="text/javascript" src="./../vendor.dll.js"></script>
// 在package.json中添加
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "build:dll": "webpack --config webpack.dll.config.js"
    -----------------------------------------------------
  },

最后打包的时候首先执行npm run build:dll命令会在打包目录下生成
vendor-manifest.json文件与vendor.dll.js文件。
Dll这个概念应该是借鉴了Windows系统的dll。一个dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的app引用的。
打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。
然后在执行npm run build
发现现在的webpack打包速度为2,3秒作用,与之前的20秒左右快了很多。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,735评论 7 110
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,346评论 4 31
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,275评论 7 35
  • 本文主要介绍两个插件:DllPlugin和DllReferencePlugin,后者配合前者使用。 Github地...
    yozosann阅读 11,106评论 4 27
  • 新出的书 元月二十四日 新出的书是快递员送上门的 他说,真沉 在他的手机上签了自己的姓名 就像办完领养手续 一层一...
    飞雪姐姐阅读 239评论 1 0