Open super-fool opened 3 years ago
影响打包效率的Loader, 首先想到的就是Babel, 然后是TS. Webpack的构建流程是: 通过入口遍历每一个依赖模块, 然后通过loader规则进行转换处理. Babel也会将代码转换为AST, 然后再编译成目标代码.
那么首先想到的是优化loader的编译范围, 即include, exclude.
include, exclude
由于Node是单线程的, 导致编译时间延长. 所以我们可以使用HappPack插件来开启系统的其他线程.
HappPack
将特性的类库提前打包引入. 这样可以减少打包类库的次数.
比如关闭console.log, 利用webpack-parallel-uglify-plugin 来并行运行 UglifyJS，从而提高效率; 使用Tree Shaking; 按需加载「Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存」
console.log
webpack-parallel-uglify-plugin
UglifyJS
Loader
影响打包效率的Loader, 首先想到的就是Babel, 然后是TS. Webpack的构建流程是: 通过入口遍历每一个依赖模块, 然后通过loader规则进行转换处理. Babel也会将代码转换为AST, 然后再编译成目标代码.
那么首先想到的是优化loader的编译范围, 即
include, exclude.HappyPack
由于Node是单线程的, 导致编译时间延长. 所以我们可以使用
HappPack插件来开启系统的其他线程.Dll Plugin
将特性的类库提前打包引入. 这样可以减少打包类库的次数.
代码压缩
比如关闭
console.log, 利用webpack-parallel-uglify-plugin来并行运行UglifyJS，从而提高效率; 使用Tree Shaking; 按需加载「Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存」