Webpack 生产环境性能优化之externals

前言

在实际开发中，我们可能会引入一些第三方库，比如说 elementUI。但是在项目打包的时候，webpack会将main.js 中引入的第三方代码进行打包，为了减小js代码的体积，我们又不希望把它打包进我们的项目中，那么我们应该怎么去做呢？webpack 为我们提供了一个叫做 externals 的配置项，这个配置项可以指定我们想要忽略的第三方库，在打包的时候就不会把这些第三方库打包进来。

如果使用了 elementUI 但是又没打包进来，那如何获取这些代码呢？

其实我们可以在 html 模版中使用 script 标签的方式，使用 cdn 的链接引入 elementUI ，这样相当于做了代码分割，而且使用现成的 cdn 链接，会让加载速度更快！

通过externals 这样就可以不把在main.js中，Vue.use(elemntui) 等引入打包的js当中了。

module.exports = {publicPath:'./'entry: ...externals: {// [npm 包名]：库名'vue': 'Vue','vue-router': 'VueRouter''element-ui': 'ELEMNT''vuex': 'Vuex','axios': 'axios'}
}

结语

使用 externals 配置可以有效地将第三方库分离出来，结合cdn可以让我们的页面加载速度得到有效的提高！

Webpack 生产环境性能优化之externals相关推荐

记一次node+react项目发布过程(一)--webpack生产环境打包优化
先附上项目效果: 项目地址: http://47.105.144.204/index github: github.com/dsying/reac- 未优化之前 webpack配置文件 const p ...
webpack学习：性能优化
本文内容如下性能优化相关内容如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案性能优化两大方面一,开发环境性能优化优化: 构建速度,代码调试 HMR热模块更新(代码调试 ...
查看webpack版本_webpack小结-生产环境构建优化
刚刚对我们前端项目做了一顿分析优化操作,因为接手时每次构建要花两分钟左右的时间,实在忍受不了,只能动手了.通过这次优化,重新温习了下 webpack 的一些知识.接下来会关于 webpack 展开写几 ...
webpack之常见性能优化
webpack之常见性能优化构建性能减少模块解析优化loader性能限制loader的应用缓存loader的结果多线程打包开启热替换常见loader和plugin 传输性能分包手动 ...
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
mysql reorg_生产数据库性能优化之reorg和表重建
生产数据库的性能调优是一个系统的工程,它不仅要求DBA熟悉db2的工作原理和各种性能指标,还要求DBA也要熟悉操作系统.存储等其他知识,甚至要求DBA熟悉应用的设计原理以及它使用数据库的方式等.这里, ...
webpack5 - 之生产环境的优化（dist压缩包、copy静态资源、缓存、代码切片、多线程打包、抽离重复代码与最小化 entry chunk）
目录 1:webpack5 - 之生产环境 dist压缩包 package.json webpack.pro.js npm run build效果 2:webpack5 - 之生产环境 copy静 ...
CentOS（5.8/6.4）linux生产环境若干优化实战
CentOS系统安装之后并不能立即投入生产环境使用,往往需要先经过我们运维人员的优化才行.在此讲解几点关于Linux系统安装后的基础优化操作.注意:本次优化都是基于CentOS(5.8/6.4). 下 ...
CentOS（5.8/6.4）linux生产环境若干优化实战------就爱运维
特别说明:本文来自就爱运维.特和所有博友分享.更多优化,请关注www.92yunwei.com后续内容以及分享. CentOS系统安装之后并不能立即投入生产环境使用,往往需要先经过我们运维人员的优化才 ...

Webpack 生产环境性能优化之externals

前言

如果使用了 elementUI 但是又没打包进来，那如何获取这些代码呢？

结语

Webpack 生产环境性能优化之externals相关推荐

最新文章

热门文章