首页
学习
活动
专区
工具
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.4K20

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.8K30

Vue 项目优化(最终输出方向)

,从而减小 chunk-vendor.js 的体积 配置方法可以参考 外部扩展(Externals) // vue.config.js let webpackConfig = {.....code } if(process.env.NODE_ENV === 'production') { webpackConfig.configureWebpack.externals...可以看出,只有在生产环境中,我们才会启用 externals 配置,原因是:公司网络不好,外部js引入老是超时 异步引入组件 异步组件,可以看我这篇文章 Vue 异步组件和动态组件(2.x) 一些非首屏需要用到...单页面到多页面] 和 第二步 [分析依赖] 的过程中,其实埋下了一个不小的坑; 由于 public/index.html 是所有入口文件的公共页面,在我们把许多第三方库用 configureWebpack.externals...public/index.html 异步引入的过程中,没有考虑到很多页面其实用不上这些库,但也引入了,造成了不小的问题; 最后调整配置,只把所有页面都需要的第三方包,才放入 configureWebpack.externals

1.3K40
领券