【工程化】taro小程序怎样引入loadsh

·  阅读 791

loadsh在小程序里的引入比较麻烦。原因如下:

1、无法按需引入。由于 tarowebpack 配置不会对 es6 moduletree 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很方便,我们也最大程度做了瘦身。但是打包后依然很大,如果不是非用不可,建议不用

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改