1.js tree shaking

1.在js中有引入自定义的模块和第三方库的情况

• 当引入自定义的模块但没有使用其中某些方法时，webpack --mode development会将没有使用到的一起打包，但生产环境下webpack会将其没有使用到的方法剔除掉
• 当仅引入第三方库，没有使用其中任何方法时，情况同上
• 当在自定义的方法中使用了第三方库的方法，而却没有调用该自定义方法时，在生产环境下也会第三方库也会被打包

注：在自定义的方法使用自定义模块的方法，但是没有调用该自定义方法时，生产环境下该自定义模块的相关内容不会被打包

 

2.解决方法

webpack-deep-scope-plugin：深层作用域分析，提高tree shaking

const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
 

module.exports = {
    plugins: [
        new WebpackDeepScopeAnalysisPlugin()
    ],
    mode: 'production'
}

实例：

//demo.js
import lodash from 'lodash-es'

function sum (a, b){
    return a + b;
}

function min(a, b){
    return a - b;
}

function isArray(arg){
    return lodash.isArray(arg);
}

export {
    sum,
    min,
    isArray
}

//index.js
import {sum} from './demo'

console.log('lemon', sum(5, 5)))

未使用webpack-deep-scope-plugin

 

使用webpack-deep-scope-plugin