当前位置:Gxlcms > JavaScript > 正确解析webpack提取第三方库

正确解析webpack提取第三方库

时间:2021-07-01 10:21:17 帮助过:41人阅读

我们在用webpack打包是时候,常常想单独提取第三方库,把它作为稳定版本的文件,利用浏览缓存减少请求次数。常用的提取第三方库的方法有两种本文主要介绍了详解webpack提取第三方库的正确姿势,常用的提取第三方库的方法有两种,本文详细的介绍了这两种方法,有兴趣的可以了解一下,希望能帮助到大家。

  1. CommonsChunkPlugin

  2. DLLPlugin

区别:第一种每次打包,都要把第三方库也运行打包一次,第二种方法每次打包只打包项目文件,我们只要引用第一次打包好的第三方压缩文件就行了

CommonsChunkPlugin方法简介

我们拿vue举例


然后打包生成的文件引入到html文件里面


DLLPlugin方法简介

首先准备两个文件

  1. webpack.config.js

  2. webpack.dll.config.js

webpack.dll.config.js文件配置如下


然后webpack.config.js 文件配置如下


然后运行


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

html引用方式


相关推荐:

详解webpack require.ensure与require AMD的区别_javascript技巧

详解vue按需加载组件webpack require.ensure

webpack学习教程之前端性能优化总结

以上就是正确解析webpack提取第三方库的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行