// webpck.config.js const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); plugins: [ new ParallelUglifyPlugin({ workerCount: 4, uglifyJS: { output: { beautify: false, // 不需要格式化 comments: false // 保留注释 }, compress: { // 压缩 warnings: false, // 删除无用代码时不输出警告 drop_console: true, // 删除console语句 collapse_vars: true, // 内嵌定义了但是只有用到一次的变量 reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值 } } }); ]
执行压缩
webpack --mode production
7.Tree Shaking
剔除JavaScript中用不上的代码。它依赖静态的ES6模块化语法，例如通过impot和export导入导出
commonJS模块 与 es6模块的区别
commonJS模块：
1.动态加载模块 commonJS 是运行时加载 能够轻松实现懒加载，优化用户体验
2.加载整个模块 commonJS模块中，导出的是整个模块
3.每个模块皆为对象 commonJS模块被视作一个对象
4.值拷贝 commonJS的模块输出和函数的值传递相似，都是值得拷贝
es6模块
1.静态解析 es6模块时 编译时加载 即在解析阶段就确定输出的模块的依赖关系，所以es6模块的import一般写在被引入文件的开头
2.模块不是对象 在es6里，每个模块并不会当做一个对象看待
3.加载的不是整个模块 在es6模块中 一个模块中有好几个export导出
4.模块的引用 es6模块中，导出的并不是模块的值得拷贝，而是这个模块的引用
7.1 保留ES6模块化语法
// .babelrc { "presets": [ [ "env", { modules: false // 不要编译ES6模块 }, "react", "stage-0" ] ] }
7.2 执行生产编译 默认已开启Tree Shaking
webpack --mode production
什么是Tree Shaking?
有个funs.js 里面有两个函数
// funs.js export const sub = () => 'hello webpack!'; export const mul = () => 'hello shaking!';
main.js 中依赖funs.js
// main.js import {sub} from './funs.js' sub();
在main.js只使用了里面的 sub函数 默认情况下也会将funs.js里面其他没有的函数也打包进来, 如果开启tree shaking 生产编译时
webpack --mode production //此时funs.js中没有被用到的代码并没打包进来 而被剔除出去了