详解webpack编译速度提升之DllPlugin-创新互联

一、前言

创新互联公司长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为万荣企业提供专业的做网站、成都网站建设，万荣网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.

DllPlugin 结合 DllRefrencePlugin 插件的运用，对将要产出的bundle文件进行拆解打包，可以很彻底地加快webpack的打包速度，从而在开发过程中极大地缩减构建时间。

二、构建效果

结论先行： 使用 DllPlugin 和 DllRefrencePlugin 进行构建，可以缩减50%～70%的构建时间。

参考Demo： dllplugin-demo

2.1 使用DllPlugin前的构建速度

 

入口文件 main.js 引入了一个 jQuery

文件，图示打包耗时2.3s。

2.2 使用DllPlugin后的构建速度

 

使用插件后，打包耗时0.6s，单次对比，缩减时长达到73%！ 2.3 如何验证DLLPlugin已经生效

对比上面两张图打包的模块列表，图二有一行不一样的输出：

[0] delegated ./src/components/jquery.js from dll-reference vendor_57c12dcd8d9774596525 42 bytes {0} [built]

这说明，此次的打包过程，没有重新打包 jQuery 模块，而是直接从 vendor_57c12dcd8d9774596525 中代理了。

三、Get Started

DllPlugin作用示意图：

 

3.1 配置webpack.dll.config.js打包静态公共资源

3.1.1 定义webpack.dll.config.js

为了减小篇幅，只帖关键配置内容，详细访问 dllplugin-demo ：

// webpack.dll.config.js
module.exports = {
  entry: {
    // 定义程序中打包公共文件的入口文件vendor.js
    vendor: [path.resolve(src, 'js', 'vendor.js')],
  },
  
  plugins: [
    new webpack.DllPlugin({
      // manifest缓存文件的请求上下文（默认为webpack执行环境上下文）
      context: process.cwd(),
      
      // manifest.json文件的输出位置
      path: path.join(src, 'js', 'dll', '[name]-manifest.json'),
      
      // 定义打包的公共vendor文件对外暴露的函数名
      name: '[name]_[hash]'
    })
  ]
}

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

名称栏目：详解webpack编译速度提升之DllPlugin-创新互联
路径分享：http://cdkjz.cn/article/ceccjo.html