loadsh在小程序里的引入比较麻烦。原因如下：
1、无法按需引入。由于 taro 的 webpack 配置不会对 es6 module 做 tree shaking， 所以会整体引入loash，直接撑爆verndor.js
2、环境问题，小程序环境下一些全局变量不存在，需要重新指定
解决方案
一、使用lodash-webpack-plugin按需加载
在config/index.js配置如下：
webpackChain(chain) {
// chain.plugin('analyzer')
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
//lodash 瘦身配置
// 奇怪行为，需要设置这个www.npmjs.com/package/lod…
// 也可以移除一些，用来瘦身，目前发现shorthands，coercions，paths是必须的，否则会很诡异
chain.plugin('lodash-webpack-plugin')
.use(require('lodash-webpack-plugin'), [
{
shorthands: true,
cloning: true,
caching: true,
collections: true,
exotics: true,
guards: true,
memoizing: true,
coercions: true,
flattening: true,
paths: true,
}])
// 将 lodash 单独拆分出来 (防止vendors.js过大)
chain.merge({
optimization: {
splitChunks: {
cacheGroups: {
lodash: {
name: 'lodash',
priority: 1000,
test(module) {
return /node_modules[\\/]lodash/.test(module.context)
},
},
},
},
},
})
},
commonChunks(commonChunks) { // 添加 lodash 公共文件
commonChunks.push('lodash')
return commonChunks
},
二、提前声明全局变量
1、提前声明全局变量
loadsh-prepare.js
// 使用loadsh必须先声明
global.Object = Object
global.Array = Array
global.Buffer = Buffer
global.DataView = DataView
global.Date = Date
global.Error = Error
global.Float32Array = Float32Array
global.Float64Array = Float64Array
global.Function = Function
global.Int8Array = Int8Array
global.Int16Array = Int16Array
global.Int32Array = Int32Array
global.Map = Map
global.Math = Math
global.Promise = Promise
global.RegExp = RegExp
global.Set = Set
global.String = String
global.Symbol = Symbol
global.TypeError = TypeError
global.Uint8Array = Uint8Array
global.Uint8ClampedArray = Uint8ClampedArray
global.Uint16Array = Uint16Array
global.Uint32Array = Uint32Array
global.WeakMap = WeakMap
global.clearTimeout = clearTimeout
global.isFinite = isFinite
global.parseInt = parseInt
global.setTimeout = setTimeout
export default {}
2、引入全局变量
loadsh.ts
import {} from './loadsh-prepare'
import _ from 'lodash'
export default _
三、注意
虽然loadsh很方便，我们也最大程度做了瘦身。但是打包后依然很大，如果不是非用不可，建议不用
