alias
在开发过程中遇到这样的需求,在.vue的template或者style标签中使用图片,当组件嵌套比较深的时候,常常需要这样../../../images
,一方面比较丑陋,一方面也不好维护
解决的方法是可以利用webpack的resolve的alias,虽然是在import的时候使用,但是其实导入其他内容的时候也能使用,只需要在字符串前面加上~
,例如~@images/avatar.png
,而且在import css文件的也可以,例如@import url('~@public/base.less')
lodash 按需加载
lodash在处理数据时是很方便的工具库,但是打包后的lodash大概有70KB,但是往往我们用不到那么多的函数,所以按需加载就很有必要了,下面介绍几个lodash按需加载的方法
-
per method packages
lodash把每一个方法都发布了一个npm package,所以可以在直接使用的时候直接装需要的package,但是这样的方式还是比较verbose的,npm i -S lodash.isequal
例如:
import isEqual from 'lodash.isequal'
- 全路径引用
在npm i -S lodash
之后,在引用的时候使用每个方法的完整路径
例如:
import isEqual from 'lodash/isequal'
-
babel-plugin-lodash, & lodash-webpack-plugin
使用的时候和引入整个lodash的方式是一样的,但是通过babel-plugin-lodash的转译以后,会变成这样
这样就可以满足我们按需加载,而且方便使用的需求,配置的使用只需要在.babelrc的"plugins"中加上lodash,然后在webpack加上插件即可