热门关键字:
jquery > jquery教程 > jquery教程 > webpack开发第三方库要注意的配置问题

webpack开发第三方库要注意的配置问题

323
作者:管理员
发布时间:2021/6/4 15:12:22
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4876
  项目为多页面应用时,编译的时候每个入口都会读取依赖的路径,所以入口越多,会导致编译越慢


  除了公用的框架(如 Vue、React)以外,不同页面所需要的第三方库可能不一样,而且部分第三方库(如富文本编辑器、SDK)仅在特定页面引用。全部打包为 vendor 会导致其他页面也加载不必要的第三方库,增加加载时间


  特定页面的第三方库直接引入 CDN 文件,不经过 webpack 读取路径


  这样能特定的页面加载特定的第三方库,在页面加载 vendor 时不会浪费过多的时间


  但是,这样并不能解决编译时间太长


  使用 webpack 的 plugin:DllPlugin 和 DllReferencePlugin


  这两个插件可以将公共的第三方库打包为 Dll (动态链接库),同时由 Dll 告诉 webpack ,哪些库不需要读取及打包, webpack 就不会在每次编译时都重复读取依赖,可以减少大量的编译时间。


  同时由于提取了公用库,每个页面仅加载最基础的库(如 Vue、Vuex、Vue-Router),可以减少加载时间。


  特定的页面引入特定的第三方库,可由 CDN 引入


  创建 webpack.vendor.build.conf.js 文件


  运行  会在上级目录生成 dll 文件夹,里面有 vendor.js 及 manifest.json


  接着,在构建文件中增加




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐