实用webpack插件之ProvidePlugin
2020-05-02 12:24
691 查看
现代化前端的全局引入是一个很有趣的东西。 先来看下以下几个场景:
- 在webpack中,我们可以在resolve的alias中定义一个层级较高的目录为一个自定义变量。例如
resolve: { alias: { '@': path.join(__dirname, '..', 'src') }}
。 - 在webpack中,我们也可以通过DefinePlugin将配置文件按照环境变量进行区分,高效的完成配置文件的按环境引入,无论是开发构建还是生产构建,都十分有用。
- 在vue中,我们可以将一个常用的方法或者库定义在Vue.ptototye上,可以通过直写属性,也可以通过vue中的plugin install上去。例如
Vue.prototype.$_ = lodash
,在应用了vue的应用上下文中,可以通过this.$_获得对lodash的引用。 - 在vue中,还有mixins,inject以及vuex等等这些全局绑定或者叫混入、注入方式的全局引入的实现。
来思考一个问题:
如果我们再Vue.prototype上绑定了太多,太大的第三方库,会不会导致root vue过大? 答案是肯定的。 有没有办法解决这个问题? 你可能会说,我不用this.xxx。用到的vue单文件组件直接import或者require就好了。 如果数以百计,数以千计甚至是数以万计的.vue文件中用到了呢?一直引入吗? 可以一直引入。但是会造成不必要的工作量。 复制代码
有没有更加优雅的解决办法?
再来思考一个问题:
如果我要在一个webpack打包覆盖的地方的xxx.js文件中用到lodash,该怎么做? 通常来讲,我们会直接`import _ from' lodash'`或者`const _ = require('lodash')`。 如果和.vue一样,有很多很多js文件需要引入呢?一直引入吗? 可以一直引入。同样会造成不必要的工作量。 复制代码
有没有更加优雅的实现方式?
看一张一直引入moment,引了99次的图先来感受一下:
虽然我的项目中是在优化moment的引入,但是为了直观明了,我将以引入lodash为例。- 使用ProvidePlugin的三种方式
- 为何一直引入造成不必要工作量
- 使用ProvidePlugin引入实践
- 思考 使用ProvidePlugin后会比一直引入减小打包体积吗?
- 使用ProvidePlugin有哪些注意事项?
使用ProvidePlugin的三种方式
// 语法 new webpack.ProvidePlugin({ identifier: 'module1', // identifier: ['module1', 'property1'], }); 复制代码
- module.exports 直接引入
- 引入某个函数
module.exports
直接引入
new webpack.ProvidePlugin({ $_: 'lodash', }); 复制代码
引入某个函数
new webpack.ProvidePlugin({ $_uniqBy: ['lodash','uniqBy'] }); 复制代码
export default
new webpack.ProvidePlugin({ Vue: ['vue/dist/vue.esm.js', 'default'] }); 复制代码
为何一直引入造成不必要工作量
加入我们有a~z,a.js到z.js总结26个js文件,每个文件都需要引入lodash。
// a.js import $_ from 'lodash'; // b.js import $_ from 'lodash'; // c.js import $_ from 'lodash'; // d.js import $_ from 'lodash'; // e.js import $_ from 'lodash'; // f.js import $_ from 'lodash'; ... // z.js import $_ from 'lodash'; 复制代码
这样做有以下几个弊端
- 要乖乖引入26次
- import进来之后的自定义名称可能会不统一,导致全局搜索困难
比如说下面这种场景,对于代码可读性是很不好的。
// a.js import $_ from 'lodash'; // b.js import _ from 'lodash'; 复制代码
使用ProvidePlugin引入实践
- webpack的plugins中增加$_的配置
- eslint的globals增加$_的配置
- 页面中如何使用$_
webpack的plugins中增加$_的配置
// webpack.base.config.js plugins: [ new webpack.ProvidePlugin({ $_: 'lodash', }), ], 复制代码
eslint的globals增加$_的配置
// .eslintrc.js globals: { $_: 'readonly', // 或者true }, 复制代码
配置为readonly是因为我们不会改写lodash,仅仅是调用其方法。
页面中如何使用$_
假设在a.js中。 删除单独的lodash引入 _ :import _ from 'lodash' 直接使用$_
:$_.uniqBy(...)
思考
使用ProvidePlugin后会比一直引入减小打包体积吗?
不会。 这是我自己对比使用ProvidePlugin前和使用ProvidePlugin后打包文件体积大小得出的结论。 至于具体原因还有待探索。
使用ProvidePlugin有哪些注意事项?
这些注意事项其实主要是为了增强代码可读性和可维护性。
- 尽量定义出唯一性高的全局变量,例如 moment
- 同一个前端小组的成员都采用全局变量的方式引入
- 最好是能维护一个全局变量的文档,在新人入职时特殊强调
看到这里,文章开头Vue.prototype.xxx
和import和require重复引入的问题”有没有更加优雅的实现方式?“就迎刃而解啦。
快到你的项目中试试ProvidePlugin吧~
相关文章推荐
- webpack---webpack中经典实用的插件copy-webpack-plugin拷贝资源插件
- webpack插件:使用HtmlWebpackPlugin在页面中使用EJS语法引用模板文件(二)
- 使用extract-text-webpack-plugin插件后报错
- webpack学习(二):clean-webpack-plugin插件和source map功能
- webpack插件之extract-text-webpack-plugin
- html-webpack-plugin插件
- webpack插件-html-webpack-plugin
- webpack 插件: html-webpack-plugin
- HTML Webpack Plugin 插件参数学习
- webpack之html-webpack-plugin插件
- webpack 启动后自动打开浏览器插件:open-browser-webpack-plugin
- webpack2利用插件clean-webpack-plugin来清除dist文件夹中重复的文件
- webpack.optimize.CommonsChunkPlugin插件的使用
- Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- webpack中插件 prerender-spa-plugin 来进行SEO优化(二十四)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- webpack的使用(插件HtmlWebpackPlugin)
- webpack 插件html-webpack-plugin的具体使用
- webpack.DllPlugin和webpack.DllReferencePlugin静态资源预编译插件