tree shaking指的是什么呢？通常指的是JavaScript上下文中未引用的代码，怎么理解呢？比如你引用了lodash包，里面有许多和JavaScript相关的便利方法，但你实际只用了其中的一两个，此时打包时如果把所有的方法都打进去了，是不是很浪费呢？tree shaking的概念就是去除多余代码。来看一个简单的例子：
import {plus} from './count' console.log(plus(1, 2))
function plus(x, y) { return x + y } function minus(x, y) { return x - y } export { plus, minus }
const path = require('path') module.exports = { entry: { main: './src/index.js', }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js', }, mode: 'development' }
如上例所示，在入口文件中我们引入count.js中plus方法，我们期望的当然是只会引入plus方法，而不是都引入，但往往不随人愿，来看结果：
你会发现编译后的代码中，整个count.js都被编译进去了，这时候你就需要tree shaking了，接下来看做tree shaking的具体方法
UglifyJsPlugin
这个插件大家一定都用过，使用UglifyJsPlugin就可以在构建的过程中对冗余的代码进行删除，在webpack4中只需要将上面mode的值改为production，就会启用UglifyJsPlugin，是不是很简单，或许你想知道webpack4中怎么自己配置UglifyJsPlugin，那就来看具体配置吧：
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') optimization: { minimizer: [ new UglifyJsPlugin({ parallel: true, cache: true, uglifyOptions: { compress: { drop_console: true, reduce_vars: true }, output: { comments: false, beautify: false } } }) ] }
是的在webpack4中的UglifyJsPlugin是配置在optimization中的minimizer中的，配置是不很简单呢？赶紧动手尝试吧
按需加载(import)
这里的import是指webpack中的动态加载，它的语法和ES6中的动态加载语法一摸一样，这是官方推荐的按需加载的方式，还是上面tree shaking的例子，我们只想引入plus方法，我们来看具体怎么使用：
import('./count.js').then((count) => { console.log(count.plus(1, 2)) })
我们只需要将入口文件改成上面的形式，其他的都不要变就可以实现按需引入，是不是很简单呢？在vue中路由的按需加载也可以这么用，来看一个简单的例子：
function view (name) { return new Promise((resolve, reject) => { import('../views/' + name + '.vue') .then((res) => { resolve(res) }).catch(e => { reject('网络异常，请稍后再试') }) }).catch(err => { throw new Error('err，组件加载失败') }) }
传入一个名字，动态引入对应目录的下的视图文件，这只是一个简单的例子，具体的使用形式还是依据具体的场景
总结
这篇文章简单的从构建速度和代码体积两个方面简单的介绍了webpack优化相关的方法，希望大家都能自己动手去写一写，毕竟只有实践出真知，更何况是编程。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: