首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Webpack 踩坑记 - 配置 externals 和 output

1、场景 当你开发的包依赖较大的第三方包(react、react-dom) 的时候,你一般是把这些大的第三方包 externals 出去: { externals: { 'react': '...也就是说,externals 应该和 libraryTarget 保持一致。library 运行在浏览器中的,你设置 externals 的模式为 commonjs,那代码肯定就运行不了了。...我们一般容易混淆的是 externals 的使用,比如对 react-dom 的 externals,经常会看到两种写法: {'react-dom': 'reactDom'} {'react-dom':...'react-dom'} 这两种的区别,其实是和你想将第三方以怎样的方式打入到你最终代码有关 还有一种 对象形式,那种是只应用在 umd 的打包方式中 2.1、externals 资料 externals...3.1、B 包的配置如下 第一份配置是针对 .umd.js 文件的(别人用于 externals ,然后通过 script 脚本标签) { externals: { 'react':

3.3K20

Vue 中引用第三方js总结

be auto injected --> 3、在webpack.base.config.js(webpack基础配置文件,包含开发和生产环境的通用配置)中,增加一个externals...配置(参见以下带背景色,加粗,倾斜的内容) 3、在webpack.base.config.js(webpack基础配置文件,包含开发和生产环境的通用配置)中,增加一个externals配置(参见以下第17...: "empty", fs: "empty", net: "empty", tls: "empty", child_process: "empty" }, externals...: "jsMind" // 属性名称:字符串 // 该字符串将用于检索一个同该字符串同名的变量,本例中 将用jsMind来检索一个全局的jsMind变量,即需要的类库 } }; 注意:之所以配置在externals...、导入css文件 一般情况下,引用第三方js的同时,还需要引入对应的css文件,引入方式分以下两种: 参考链接 https://webpack.docschina.org/configuration/externals

2.6K10

前端性能优化——包体积压缩82%、打包速度提升65%

3)npm run serve运行后,在浏览器打开http://127.0.0.1:8888/ 可以看到分析页面 初始打包速度 25386ms totalTime.png 开始优化 ✈︎ 1、externals...的有效性: 重新打包,最新数据如下: 打包体积:1.12M externalsSize.png 打包速度:18879ms externalsTime.png 使用 externals 后,包体积压缩...50%、打包速度提升26% 2、组件库的按需引入 为什么没有使用 externals 的方式处理组件库呢?...区别是 DllPlugin 是将依赖单独打包,这样以后每次只构建业务代码,而 externals 是将依赖转化为 CDN 的方式引入 当公司没有很好的 CDN 资源或不支持 CDN 时,就可以考虑使用...DllPlugin ,替换掉 externals DllPlugin 配置流程大致分为三步: 1)创建 dll.config.js 配置文件 import { DllPlugin } from "webpack

1.7K30
领券